CSS兼容全浏览器技巧与注意事项

"本文主要探讨了如何让div+css在所有浏览器中保持良好的兼容性，列举了一些关键的注意事项和技术要点，旨在帮助开发者解决跨浏览器样式差异的问题。" 1. DOCTYPE影响CSS处理：DOCTYPE声明会影响浏览器进入何种模式解析页面，如XHTML严格模式或Quirks模式。不同的模式下，浏览器对CSS的支持和解析方式可能存在差异，因此在设计页面时，应明确指定DOCTYPE以确保一致性。 2. FF与IE中div居中问题：Firefox（FF）可以通过设置margin-left和margin-right为auto实现div居中，而Internet Explorer（IE）则需要结合text-align:center。对于body，需要设置text-align并在div中使用margin:auto。 3. FF与IE的padding处理：FF中，设置padding会影响元素的高度和宽度，但IE不会。为使两者一致，可为IE特别设置height和width，并用!important强调FF的样式。 4. 使用!important为FF设置特别样式：FF支持!important，这可以用来覆盖其他样式，但IE会忽略。因此，可以利用这一点为FF设置特别样式，同时确保IE也能正常显示。 5. div的垂直居中：通过设置vertical-align:middle和line-height等于div高度，可以实现文字的垂直居中。但需要注意，这种方法要求内容不换行。 6. cursor属性：cursor:pointer在FF和IE中均能显示手指状游标，而cursor:hand仅适用于IE。 7. 链接的边框和背景色：在FF中，为使链接显示边框和背景色，需设置display:block和float:left，同时设定高度以避免布局错位。 8. 解决Firefox与IE的BOX模型差异：由于盒模型解释不一致，可通过为元素设置两个不同margin值并使用!important来调整，如`margin:30px!important;margin:28px;`。注意，IE只认最后一个margin值。 9. ul标签的处理：在Mozilla中，ul默认有padding，而在IE中只有margin。通过设置`ul{margin:0;padding:0;}`可以消除这一差异。 10. float的div闭合：当使用float布局时，记得为每个float元素添加闭合标签，以防止浮动元素对后续非浮动元素造成影响。 11. 清除浮动：为了防止浮动元素对父元素高度的影响，可以使用clearfix类或者添加额外的clear元素来清除浮动。 总结来说，确保div+css在所有浏览器中兼容需要考虑不同浏览器对CSS的解析差异，通过巧妙地使用CSS规则、属性及浏览器特定的前缀和技巧，可以有效地解决这些问题。在实际开发过程中，测试和调试在各种浏览器上的表现也至关重要，以确保用户体验的一致性。