常用的clearfix对于ie8的影响

/ 0评 / 0

[css]

.clearfix:after { clear: both; visibility: hidden; content: '. '; display: block; height: 0;} /* 加点 与不加点 作用于ie8得区别 */
.clearfix { display: inline-block; }
* html .clearfix { height:1%; } /* 兼容于ie6 或者使用 *zoom: 1; 让ie6自动清除浮动包裹里面的元素 */

[/css]

如上的clearfix是我常用的清除浮动的代码,用过许多次了,感觉没有什么问题;不过前几天突然发现clearfix在ie8下有特别的显示。demo请点击clearfix_ie8,在firefox、chrome、opera、ie7、ie6都是如下的图形

但是在ie8模式下,你会看到明显的格式区别item之间有大约10px的间隙。

我们知道最初浮动的清除采用的是在浮动的子div同级加空div的方式,即<div style="clear:both"></div> 这样既可自动撑开父div,达到清除浮动的效果。

而clearfix原理同样如此,after伪类可以在使用clearfix的容器之后新建一个空的容器,这容器高度为0、visibility不可见,clear单独在一行显示,display为块级元素,content包含一个“.”。

after伪类在ie7以上、firefox、chrome、opera等浏览器都支持,但ie6以及ie6内核的其他浏览器都是不支持这个的。所以让ie6支持可以采用

[css]

* html .clearfix { height:1%; } /* 兼容于ie6 或者使用 *zoom: 1; 让ie6自动清除浮动包裹里面的元素 */

[/css]

不过ie8 clearfix多出10px的原因还没说明。我偶然的实验发现,原来问题就在这个content,

content 属性与 :befor 及 :after 伪元素配合使用,来插入生成内容。

该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

而ie8的10px多出来的,就是content: '.'; 这个句点所产生的,所以建议不要加上句点,直接采用content: ' ';空格即可,修改后的效果clearfix_ie8_2

发表评论

您的电子邮箱地址不会被公开。

*