FireFox和IE浏览器在CSS兼容性上存在差异，建议使用CSS Hacks或条件注释解决。
DOCTYPE 影响 CSS 处理
| 浏览器 | 描述 |
| Firefox | 支持标准模式，需要添加DOCTYPE声明。 |
| IE | 在缺少DOCTYPE声明时，会使用怪异模式（Quirks Mode），导致CSS解析不一致。 |
div居中问题
| 属性 | Firefox | IE |
| margin-left, margin-right | 设置为auto即可居中 | 需要设置body的text-align为center，并且div的margin也要设置为auto |
padding与高度宽度问题
| 属性 | Firefox | IE |
| padding | 设置后会增加div的高度和宽度 | 不会增加高度和宽度，需要用!important多设一个height和width |
垂直居中问题
| 属性 | Firefox | IE |
| vertical-align:middle; line-height | 将行距增加到和整个DIV一样高，然后插入文字实现垂直居中 | 控制内容不换行 |
!important规则
| 属性 | Firefox | IE |
| !important | 支持，可以优先解析 | 忽略!important，可用它为FF特别设置样式 |
游标样式
| 属性 | Firefox | IE |
| cursor | pointer可以在FF和IE中显示游标手指状 | hand仅在IE中可以显示游标手指状 |
链接样式
| 属性 | Firefox | IE |
| display: block; float: left | 保证链接不换行，同时可以设置边框和背景色 | 需要参照menubar设置高度以避免底边显示错位 |
ul标签默认值
| 属性 | Firefox | IE |
| padding | ul标签默认有padding值 | ul标签只有margin值，没有padding值 |
float闭合问题
| 属性 | Firefox | IE |
| clear:both | 清除浮动，需要在两个具有float属性的div之间加上clear样式的div | 确保clear样式的div与float属性的div同级，避免嵌套关系 |
容器包涵关系
| 属性 | Firefox | IE |
| width, height | 外层宽度会被内层更宽的div挤破，需用Photoshop或Firework量取像素级的精度 | 同上 |
min-width与min-height问题
| 属性 | Firefox | IE |
| min-width, min-height | 正常浏览器里这两个值不会变 | IE会将正常的width和height当作最小值来使 |
页面最小宽度
| 属性 | Firefox | IE |
| min-width | 指定元素的最小宽度 | IE不识别min-width，但可以用Javascript实现类似效果 |
DIV浮动产生的双倍距离问题
| 属性 | Firefox | IE |
| float, margin | float的div在IE下设置的margin会加倍 | 解决方案是在这个div里面加上display:inline |
万能float闭合方法
| 属性 | Firefox | IE |
| clear:both | 清除浮动，确保float标签闭合 | 同上，注意位置和同级关系 |
相关问题与解答
1、为什么在Firefox中设置的!important规则在IE中无效？
回答：这是因为IE浏览器会忽略!important规则，为了兼容Firefox，可以将带有!important的样式放在另一个不带!important的相同样式之前，Firefox会优先解析带!important的规则，而IE会忽略它并应用不带!important的样式。
2、如何解决在IE中由于float导致的双倍距离问题？
回答：在IE6及以下版本中，设置为float的div的margin会加倍，解决方法是在这个div里面加上display: inline;，这样IE会将其解释为内联元素，从而忽略双倍距离的问题。
<div id="imfloat"> </div> <style> #imfloat { float: left; margin: 5px; /* IE下理解为10px */ display: inline; /* IE下再理解为5px */ } </style>小伙伴们，上文介绍了“FireFox浏览器和IE浏览器下CSS兼容问题”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
