揭秘CSS(第 1 版)
10.4.1 浮动元素双倍边距Bug
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

渐进增强与优雅降级

兼容浏览器的方法

IE的hasLayout

修复IE的常见BUG

CSS开发人员可能经常会碰到的一个现象是,一个页面在IE(特别是老版本的IE)中显示正常,而在现代浏览器中却完全变形了,或者情况完全相反。

常常能听到有人抱怨:“在IE上开发时间中,超过 60% 的时间,都是在与IE的Bug作斗争。”导致这一现象的根本原因,是不知道IE都有哪些 bug,也不知道如何解决这些 bug。在出现问题时,往往束手无措,更不要说预防 Bug 了。

因此,作为一位优秀的CSS开发人员,必须了解IE浏览器的常见 Bug,以及导致这些 Bug的各种因素,以便能够预防 Bug 的产生,或在出现问题后,能够及时发现并快速修复。

浮动元素双倍边距Bug

浮动元素双倍边距 Bug,是IE6及更低版本中的一个经典Bug。当给元素设置了 float 属性,同时设置了与浮动方向相同margin值,则浮动元素的 margin就会加倍。

简单的说,就是左浮动元素的 margin-left 被加倍,而 margin-right 不会被加倍,右浮动元素的 margin-right 被加倍,margin-left 不会被加倍。

但是,当有多个元素都在一行内向相同方向浮动,且都有同方向的 margin 时,只有靠近浮动方向的第一个元素的 margin 会加倍,其他元素则不会。

假设在一个容器中,有两个元素:

<div id="wrapper">
    <div class="fl">float</div>
    <div class="fl">float</div>
</div>

现在,让两个元素都向左浮动,并为它们设置 100px 的左外边距:

.fl {
   float: left;
   width: 100px;
   height: 60px;
   margin-left: 100px;
}

在IE6中及更低版本中,会发现第一个元素的左外边距,由 100px 被扩大为 200px。而第二个元素的左外边距仍然是 100px,没有被加倍。如图 10‑2 所示:

浮动元素双边距Bug
图10-2 浮动元素双边距Bug

修复这个 Bug 的方法很简单,只需将浮动元素的 display 属性设置为 inline,便可轻松解决问题。但是,这里的 display 属性,除了修复IE Bug外,并没有其它用处。

.fl {
   float: left;
   width: 100px;
   height: 60px;
   margin-left: 100px;
   display: inline;
}

修复后的运行效果如图 10‑3 所示:

修复浮动元素双边距Bug
图10-3 修复浮动元素双边距Bug

将浮动元素的 display 属性设置为 inline 并不会影响它的显示方式,还能阻止IE6及更低版本将它的外边距加倍。因此,每当让具有水平外边距的元素进行浮动时,都应该很自然地将它的 display 属性设置为 inline,以防止外边距被加倍。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验