关于clearfix:after的解释

在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的效果:



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PhoebeSky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值