Sonic Cube

IE6页面元素边框问题.

IE6对CSS的支持差是众人皆知的.下面又是一个案例.

当一个未设定高度的元素内部的子元素使用float的属性浮动之后,该元素的侧边框将无法完整显示.例如:
<div id="parent" style="border: 1px solid #000;">
<div style="float: left;">
Inner Content
Inner Content
Inner Content
Inner Content
Inner Content
<div>
<div>

此时,id为parent的元素,侧边框在IE6中可能无法完整显示.

解决的方法,其实也很简单,可以通过添加一条css属性,_height: 1px;(注意属性前面的下划线!)
<div id="parent" style="border: 1px solid #000;_height: 1px;">
<div style="float: left;">
Inner Content
Inner Content
Inner Content
Inner Content
Inner Content
<div>
<div>

其实这个方法又是利用了IE6的DIV盒模型的另外一个bug实现的.IE6在子元素高度超过父元素css内定义的高度是,css内对高度的定义便会失效.而在属性前面添加下划线的作用是一个css hack,属性前带下划线使该属性只能被IE6识别,IE7及以上版本,Firefox,Opera,Safari等都不能识别.

解决该问题的另一办法是给父元素也添加上float属性,但是该做法可能破坏页面的整体布局.

Tags: css hack, ie6, 边框