常常我们会遇到我们要设置在一行显示的布局, 却因为种种原因造成了错位, 看到结果是在一行的最后一个盒子布局错位掉下去了.
造成 DIV CSS 网页布局错位的原因大概有两种情况, 一种是宽度计算错误, 一种是 IE BUG 造成, 特别是 IE6 和 IE7. 接下来我们为大家介绍错位原因与解决错位方法.
一, 宽度计算错误解决方法
宽度计算错误, 假如总宽度为 500px, 有 3 个盒子, 分别 CSS 宽度为 200px,200px,100px, 这个没问题会在一排显示不会错位, 但如果加入了 CSS 边框, padding,margin 属性时, 别忘记这几个属性所占的宽度.
特别是 padding 与边框 border 占用宽度空间不要忽略了. 如果有一个盒子加入左右边框, 这个时候有一个盒子中刚合适的宽度条件下减少 2px 边框占用宽度, 否则即会总 3 个盒子合计宽度大于了总宽度, 造成错位.
宽度问题造成 CSS 布局错位小结:
内盒子宽度之和大于了外宽度造成错位, 检查时候我们一定计算设置宽度, 边框, paddind,margin 之和.
二, IE BUG 特别是 IE6 和 IE7 造成错位
这个问题是最常见的问题, 我们检查完第一点宽度问题, 而宽度没问题, 这个时候在 IE6,IE7 中错位, 在 IE8 及其它浏览器没有错位问题, 这个时候我们就要考虑到你是否使用了 margin 属性.
通常我们使用了 CSS 浮动 (CSS float) 情况下使用 margin(margin-right margin-left 这里特别是这个属性)此属性会产生双倍数值, 这个时候我们需要使用 CSS hack 解决此问题. 让 IE6 或 IE7 单独识别特指定 margin 样式.
如:
1,IE6 单独识别(margin-left 对于只有 IE6 错位情况下)
{margin-left:5px;_margin-left:2px}
这个时候除 IE6 外其它浏览器设别 margin-left:5px,IE6 单独识别_margin-left:2px
2,IE7 与 IE6 都识别(margin-left 对于 ie6 和 ie7 识别其它版本和品牌浏览器不设别)
{margin-left:5px;*margin-left:2px;}
这个时候除 IE6 和 IE7 外, 其它浏览器设别 margin-left:5px,IE6 和 IE7 识别 * margin-left:2px
来源: http://www.css88.com/qa/html5/11547.html