关于网页的小笔记：Firefox 和 IE、fieldset 标签

谢益辉 / 2007-09-06

做网页时比较头疼的事情之一就是要不停地考虑兼容问题：一方面考虑不同的分辨率下的效果（1024 x 768、1280 x 1024 等），另一方面就是浏览器的兼容（Internet Exporer、Mozilla Firefox 等）。在我做网站的初期，我比较重视前者，因此做网页时经常换分辨率，那时候还特别重视 800 x 600 的分辨率，如今觉得这种小显示器可能已经只是少数了吧，因此还是以 1024 x 768 为中心设计网页的宽度（980px 左右），保证在 1024 x 768 下面把屏幕基本填满，而在 1280 x 1024 下面看着也不觉得太窄就行；后来开始用 Firefox 时，发现 IE 和 Firefox 对 HTML 的解析有很多区别，因此开始琢磨浏览器的兼容问题。

昨天花了好半天时间把这个 Blog 的模板自己重新改写了一遍，这个过程中曾经对层（div）的对齐问题恼火了一阵子，因为设置 body 的文本对齐为居中之后，里面的 div 在 Firefox 下死活都不肯居中对齐，后来才明白，必须得设置 div 的左右边距为 auto 才行。总体感觉 Firefox 对 HTML 的解析还是好一些，比如本页右边的那些方框中的列表项我都设置了强制不换行（white-space: nowrap;）、隐藏多余的部分（overflow: hidden;），可是当鼠标移上去的时候，IE 就会把多余的部分又给显示出来，而 Firefox 就不会。这一点我想了半天都没找出好办法解决，于是就那样扔着吧，不管了。

其实这次改模板的主要目的是想应用 <fieldset> 和 <legend> 这两个标签，顺便把灰色的背景改为白色、把引用 <blockquote> 和代码 <pre> 的样式重新设置一下。一段时间之前我曾经看到过一个叫 Planet PHP 的国外 Blog 站，当时特别喜欢它那种像 Visual Basic 里面 Frame 控件的格式，也就是这样的：

Here is the titleThe FIELDSET element defines a _form control group_. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls. The grouping provided by FIELDSET also helps the accessibility of forms to those using aural browsers by allowing these users to more easily orient themselves when filling in a large form.

因此看了看它的网页源码，发现用的是 <fieldset> 和 <legend> 标签，本来之前觉得挺神奇，还以为是用 CSS + 表格作出来的，看了源码才知道原来这么简单。于是乎，我这个 Blog 页面也就改造成这样了。

关于引用和代码的样式，其中 “引用” 采用了一个 “引号” 的图片作为背景放在左上位置，而 “代码” 采用了上下两条水平虚线作为分界标志，这两种样式的字号都缩小为 11px，不过在 IE 下面看不出 11px 和 12px 汉字的区别，但在 Firefox 下英汉的 11px 字号都确实被缩小了。

← 猪肉涨价、查证的保安 网页中的图片点击放大效果：Highslide 和 Lightbox →