使用float和background-color时出现的IE Bug 2
译者序:在做系主页时遇到了这个问题,原作者说明了几种解决方法,觉得很不错,遂译之。
《IE CSS bugs when using floats and background-color》
如果一个div设置了background-color并且包含了具有float属性的元素(包括利用css的“float”属性或HTML中图片的“align”属性),IE浏览器就会解析错误——我IE6里一些样例页面的截图,对比它应该显现的页面。
IE6有时候会隐藏div里的部分或全部元素(样例2和5的标题不见了);此外,在IE5和6中,如果容器被设定了属性position: relative, 则浮动的元素即会消失(参看样例4)。与其他文章不同的是,无需任何类型的间隔div就可以引发这个bug——这里所提及的例子中就没有用到任何相关的。操纵滚动条,往下滑会使丢失的内容被隐藏起来,再往上滚动的时候,丢失的内容就会显现出来,问题就解决了,但这不是一个可行的方法。
其他站点也注意到了这个问题,包括evolt.org和Position Is Everything (the Peekaboo bug,链接中包含有更多的好玩的加法bug的动作
),然后他们的解决方法是给不同的元素添加上属性position: relative;不管是那些消失的元素(evolt.org), 还是div容器以及包含在期内的所有浮动的元素(Position Is Everything)。这个不是直接的方法,因为你必须给所有可能的元素添加上position属性,并且不幸的是它又引发了另一个position:relative的bug,特别是Mac里的IE5。
Position is Everything 与 evolt.org上的评论中还提到了另一个解决方法,那就是给div容器设定一个宽度,这在一定程度上能解决问题,但当该div有边框(border)与外补丁(margin),这个方法就不可能实现。
我的解决方法就比较简单:给那个div容器设定line-height属性。浏览器默认的行高(line height)好像是介于1.1-1.2之间,所以设置行高,使之在界面上不产生太大的变化,并能解决IE的bug。
为了说明问题和解决方法,对于IE6 和 Firebird 0.6.1,我已经提供了六个样例(来源于evolt.org),还有一些页面的截图。