IE与Firefox CSS兼容性问题解决全攻略

"这篇文章主要汇总了Internet Explorer (IE)与Firefox浏览器在处理CSS样式时的兼容性问题，包括DOCTYPE对CSS的影响、元素居中、边距处理、垂直对齐、鼠标光标显示、浮动元素、盒模型差异以及列表样式等方面的问题。" 1. DOCTYPE与CSS：在HTML文档中声明正确的DOCTYPE对于触发浏览器的标准模式至关重要。不正确的DOCTYPE可能导致IE浏览器进入quirks模式，从而导致CSS渲染方式与Firefox等其他标准支持浏览器不同。 2. 元素居中：Firefox可以通过设置`div margin-left`和`margin-right`为`auto`实现水平居中，而IE可能需要将`text-align`设为`center`。 3. body文本对齐：在Firefox中，要使整个页面内容居中，需将`body`的`text-align`设为`center`，然后让包含内容的`div`使用`margin: auto`；而在IE中，`div`还需要显式设置`margin-left`和`margin-right`为`auto`。 4. padding与高度宽度：Firefox和IE对元素内填充和高度宽度的计算方式不同。在Firefox中，`padding`不会影响`height`和`width`，而在IE中会。因此，有时需要使用`!important`来覆盖默认样式。 5. `!important`优先级：Firefox尊重`!important`声明，但IE6及更早版本可能会忽视它。为确保在两个浏览器中生效，可能需要为每个浏览器设置单独的`!important`规则。 6. 垂直居中：要实现元素内部内容的垂直居中，Firefox可以使用`vertical-align: middle`，并配合一个具有固定`line-height`的父元素，而IE通常需要通过其他方法，如使用`table-cell`布局或绝对定位来实现。 7. 鼠标光标：在Firefox中，使用`cursor: pointer`可以让元素显示手形光标，但在IE中需要使用`cursor: hand`。不过现代浏览器普遍支持`cursor: pointer`，所以现在一般只用这一种写法。 8. 浮动元素与菜单栏：Firefox会自动清除浮动元素的影响，而IE可能需要手动添加清除浮动。对于菜单栏，Firefox通常不需要设置`height`，但IE可能需要。 9. 盒模型差异：在盒模型方面，Firefox遵循W3C标准（内容区域+边框+内填充），而IE5和IE6有其独特的盒模型（内容区域+内填充+边框）。可以通过调整`margin`值和使用`box-sizing`属性来处理这些差异。 10. IE5与IE6的盒模型问题：为解决盒模型差异，可以使用条件注释或特定的CSS hack。例如，为IE5设置`width`和`margin`，而为其他浏览器设置`width`和`margin`，并使用`!important`确保优先级。 11. 无序列表样式：Firefox默认为`ul`元素提供内边距，而IE通常没有。为了保持一致性，通常需要明确设置`ul {margin: 0; padding: 0;}`。 以上内容总结了IE与Firefox之间常见的CSS兼容性问题及其解决方案，帮助开发者在跨浏览器开发时避免样式显示不一致的情况。