CSS浏览器差异
这些是在用CSS时积攒下来的一些常见的CSS在不同浏览器下的差异及解决方法，积少成多，下面所提到IE，不做特指，均是指IE6及以下版本，因为我还没有用过IE7 : )
float left margin
这个首当其冲了，属于最常见的一个问题之一。IE（直到IE6都还有）在解释float left的box时，如果有margin-left，会将其放大一倍，比如 margin-left: 10px 在IE下则为20px，由于float left在用CSS布局时是如此常用，因此这个问题也变得广为人知，解决方法是，加上 display:inline 属性就可以了，为什么能解决，我没去理它，反正加上这个之后，IE解决了这个问题，又对其它浏览器没有影响，所以还算方便，比如下面的这个box：
#content_single {
float: left;
width: 650px;
display:inline; /*IE fix */
margin-left: 150px;
}
字体单位：em和px
这是另一个著名的差异：修饰font-size的单位。一般理解px是像素，作为字体大小单位非常合适，可惜IE似乎将px作为“不可变单位”来理解了，在浏览器端改变字体大小时，如果IE遇到用px来修饰的字体，它不允许在浏览器端做字体的放大和缩小(反正直到IE7都不行)，也就是客户端即使字体很小（有可能是因为其分辨率较高，或视力不佳），也无法通过IE来放大字体，这是一个易用性的损失。
虽然Firefox是支持px字体的缩放，但为了保证浏览器兼容性，很多网页选择了em作为字体单位，这是一个相对单位，IE和Firefox都可以支持这种字体的缩放。
box宽度超出
在使用float布局时，多个float left的box会依次从左到右排下去，直到宽度超出父容器的宽度， 这时会往下排，以保证父容器的宽度符合设计。可是如果在float box之后紧接着跟一个正常定位的box，这时不兼容的问题就来了，如果这个新的box宽度超出父容器，IE和Firefox的处理就有所不同了。
由于CSS规范定义是说，float的box和非float的box是独立定位，因此在x和y方向上非float的box和前面的float的box应该是重叠的，只是由于宽度超出，所以x方向会出现滚动条，firefox是这样做的。但IE的理解不是这样，在出现这种宽度超出情况时，它会把这个非float的box挪到前面float box下面，可是实际上宽度还是超出，还是有滚动条，所以有些难以理解，也和规范不符。
这个问题，在做一些页面侧边栏（sidebar）的布局时可能会遇到，没有看到好的解决方法，我的不算方法的方法是仔细计算每个box的宽度，确保他们不要超出父容器宽度。
负margin
在CSS规范上margin取值是可以为负数的，比如一个-100px的margin-left，则表示box可以在原位置基础上左移100像素，这通常用于将一个子box移出父box的矩形范围时使用，但IE不允许这种子box越出父box的边界，所以会将这类box裁减掉。这给我们在CSS设计时带来了阻碍，简单的规避方法就是不要使用负margin，这显然会损失一些灵活性。
update（2008-06-18）：这里有一篇专门讲CSS Bug修正的文章，不错。
相关文章