在Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原本,这个clearfix的CSS应用了after这个伪对象,它将在利用 clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为潜藏 。这样就达到 了撑开容器的目标啦。
但是,在文章中说,Windows IE并不支撑这样做。所以要让IE也完善显示,则必须 在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:
CSS代码:
代码:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {height: 1%;}
因为转义字符"\",Mac IE涉猎器会漠视 掉这段Hack,但Windows IE不会,它会利用 * html .clearfix {height: 1%;} 来达到 撑开DIV容器的目标(貌似Mac IE没有措施解决这个问题,不过幸好用户数量是在是太少了,Safari支撑就可以了:p)。
自己做了测试,IE8及IE8以上版本都可以,但是IE7很遗憾的不支持,如果不用兼容IE7的,这是个不错的解决办法
下面是IE7的效果:
下面是IE8的效果: