阅读量:0
IE和Firefox在CSS中的差别包括盒模型处理、默认样式、选择器支持等方面。
IE和Firefox在CSS中的差别主要体现在以下几个方面：
1、CSS HACK
!important 方法：!important 方法主要用于解决 IE6 的 HACK，在 IE7 及 Firefox 中，该方法也得到支持，但需注意声明位置提前。
***+html 与 *html**：*+html 是 IE7 特有的标签，而 *html 适用于 IE6，Firefox 不支持这些标签。
2、万能 float 闭合
clear float：通过在 CSS 中添加 .clearfix:after 样式，可以解决浮动元素闭合的问题，这在 IE 和 Firefox 中均有效。
3、其他兼容技巧
padding 和 width/height：在 Firefox 下，设置 padding 后会导致 div 的宽度和高度增加，而在 IE 下则不会，可以通过使用 !important 来解决此问题。
居中问题：垂直居中可以通过设置 line-height 和 vertical-align: middle 来实现，水平居中则可以使用 margin: 0 auto，在 Firefox 中，设置 margin-left 和 margin-right 为 auto 即可实现居中，而在 IE 中则需要额外设置 text-align: center。
4、盒模型解释差异
宽度计算：IE 和 Firefox 对盒模型的解释不同，导致宽度计算上的差异，一个宽度为 600px 的 div，在 IE 中的计算方式与 Firefox 不同。
5、列表样式和布局
ul 标签默认样式：ul 标签在 Firefox 下默认有 list-style 和 padding，而在 IE 中只有 margin，为了避免不必要的麻烦，最好事先声明。
高度自适应：外部 wrapper 的 div 不应定死高度，建议使用 overflow: hidden 来实现高度自适应。
以下是两个与本文相关的问题及其解答：
1、为什么在 Firefox 下设置 padding 后会导致 div 的宽度和高度增加，而在 IE 下则不会？
解答：这是因为 Firefox 和 IE 对盒模型的解释不同，在 Firefox 下，padding 和 border 会算入元素的总宽度和高度，而在 IE 下则不会，为了解决这个问题，可以使用 !important 来强制设置宽度和高度。
2、如何实现在不同浏览器中的垂直和水平居中？
解答：垂直居中可以通过设置 line-height 和 vertical-align: middle 来实现，水平居中则可以使用 margin: 0 auto，在 Firefox 中，设置 margin-left 和 margin-right 为 auto 即可实现居中，而在 IE 中则需要额外设置 text-align: center。
以上内容就是解答有关“IE Firefox在css中的差别 (部分)”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
