css清除浮动的方法总结与选择(2)
作者:dudo 来源:dudo blog 时间:2008-06-06 12:58:00
2)使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容:
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用,所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中,最常用就是Holly招数。Holly招数的原理是这样的,CSS代码
/* 这段代码只有IE/Win可以看见 \*/
CSS 规则
/* 结束Hack */
上面的代码中有两行注释,其中第一行结束时出现了反斜杠(\),在Mac的Internet Explorer中会认为注释并没有结束,于是继续向下直到第一个完事的“*/”出现,这中间的所有字符都被当作是注释,而IE/Win却也只会把第一行和第三行看作是注释,中间的为有效代码。所以这样就区分出来了不同平台上的IE了。
正是基于以上原理,在windows的IE 6上的清理浮动,可以使用如下代码:
#outer {
display:inline-block;
}
/* Holly Hack Begine \*/
* html #outer {
height:1%;
}
#outer {
display:block;
}
/* End Hack */
P.S. 如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1%;}即可。
另外,似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
如果你对如何使用CSS 2中的伪类不熟悉的话,推荐你先阅读一下“细说CSS样式选择符——CSS 2.1 Selectors(1)、(2)、(3)”
标签:浮动,方法,css,设计,布局
0
投稿
猜你喜欢
ORACLE数据库空间整理心得
2010-07-16 13:33:00
MySQL数据库中与 ALTER TABLE 有关的问题
2009-01-14 11:57:00
彻底弄懂CSS盒子模式之一(DIV布局快速入门)
2007-05-11 17:03:00
HTML的优化杂记
2010-03-10 10:39:00
asp清空站点缓存
2009-08-04 18:01:00
ASP字符串16进制互转
2008-06-24 12:28:00
asp 实现的冒泡排序程序
2011-03-25 11:13:00
ASP Access实现网站计数器(访问量)
2011-04-10 10:33:00
Dreamweaver制作网页实用七小招
2009-05-29 18:36:00
用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等
2011-12-01 07:53:11
使用组件来保护你的ASP代码
2008-06-03 13:47:00
asp数字或者字符排序函数代码
2011-02-24 11:00:00
asp如何用JMail同时给多人发信?
2010-06-12 12:52:00
asp fso type属性取得文件类型代码
2009-02-04 10:09:00
ASP中如何判断字符串中是否包数字
2008-07-21 12:04:00
论坛首页效果图设计
2009-03-19 13:46:00
ASP中Session技巧 默认过期时间为20分钟
2012-12-04 20:28:26
301转向代码合集
2008-03-20 10:12:00
MSSQL存储过程分页,ASP存储过程分页
2009-09-11 12:50:00
巧用缓存提高ASP应用程序的性能
2008-03-09 15:23:00