阅读量:0
DIV CSS布局的浏览器兼容性问题通常通过CSS hacks、条件注释和跨浏览器测试解决。
在网页设计中，DIV+CSS布局的浏览器兼容性问题是一个常见且棘手的挑战，不同浏览器对CSS规范的实现存在差异，导致同一段代码在不同浏览器中的显示效果可能大相径庭，以下是一些常见的DIV+CSS布局浏览器兼容问题及其解决方法：
文字大小不兼容
问题描述：同样大小的字体，在不同浏览器下占用的空间不同，导致排版不一致。
解决方案：给所有文字设定通用的lineheight值，确保文字行高一致。
容器高度不兼容
问题描述：在Firefox下，容器定义height后不会因为内容超出而撑大；而在IE6下，容器会被内容撑大，高度限定失效。
解决方案：如果设置高度，需要同时把内容物高度限定，如使用overflow:hidden；或者当需要随着内容自适应高度时，设置minheight和maxheight。
容器宽度不兼容
问题描述：如果div容器设定float浮动但未设定宽度，Firefox和IE6的表现会不同。
解决方案：浮动div容器一般需定义width。
浮动不兼容
问题描述：当前面div有左浮动和右浮动时，下面div会受到它们的影响也有浮动。
解决方案：给下面的div设定清除clear:both。
margin加倍问题
问题描述：在IE6下，给浮动容器定义marginleft或marginright时，实际效果是数值的2倍。
解决方案：给浮动容器定义display:inline。
背景吞吃现象
问题描述：在IE6下，上下两个div，上面的div设置背景，但下面没有设置背景的div也出现了背景。
解决方案：使用zoom:1。
IE条件注释
问题描述：针对不同版本的IE浏览器，需要应用特定的CSS样式。
解决方案：使用条件注释来加载不同的CSS文件，以适应不同版本的IE浏览器。
其他注意事项
DOCTYPE声明会影响CSS的处理方式。
在Firefox下，body设置textalign时，div需要设置margin: auto才能居中。
在设置padding后，Firefox会增加div的高度和宽度，但IE不会，可使用!important多设一个height和width。
FAQs
为什么在不同浏览器下，同样大小的字体占用的空间不同？
不同浏览器对字体渲染的方式不同，尤其是对于中文字体，可能会导致同样大小的字体在不同浏览器下占用的空间不同，为了解决这个问题，可以给所有文字设定通用的lineheight值。
如何解决容器在IE6下被内容撑大的问题？
在设置容器高度时，可以使用overflow:hidden属性来限制内容的高度，避免容器被撑大，也可以设置minheight和maxheight属性来控制容器的最小和最大高度。
