比较两种CSS清除浮动的兼容


清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮动的地方都要清除。

比如,我在瑞星的项目中一直这样使用:

.clear:after{content:'\0020';display:block;height:0;clear:both}.clear{*zoom:1}观察腾讯微博项目,并不是每个浮动必须清除,但是如果内部元素连续浮动,其外部元素必然定高以避免找不到高度的情况,其清除浮动的代码如下:

.clear:after{content:'.';clear:both;display:block;height:0;visibility:hidden;line-height:0}.clear{zoom:1}腾讯微博的.clear和许多选择器并列在一起,如:

.clear,.LC,.topicList,.mediaWrap,.cellMod{zoom:1}我和腾讯微博的技术总监聊过这里可以去掉.LC等其余的选择器,并在这些类上定义clear的类,这个问题肯定是遗留的,不过对性能没有影响。瑞星一个老资历的前端说是尽量减小html文件,这些大小可以作为代价转移到css文件上,不过我个人觉得css简洁一些,方法统一一些也是好事。

比较瑞星和腾讯的清除浮动的代码,有一些地方是不一样的,我在做瑞星的项目时,一开始采用的也是和腾讯一样的办法,在连续浮动元素后面追加'.',这样一来,页面中会出现大量的'.'字符,所以这种办法一定要定义visibility:hidden的属性。现在的瑞星项目采用的办法是在连续浮动元素后面追加空格(\0020),这样就不需要visibility和line-height属性,因空格在页面中是不可见的,而且html代码中的单个空格对页面显示并不会产生影响。在zoom:1的定义上,瑞星的定义只针对了会出问题的IE7和IE6浏览器,腾讯的代码针对所有浏览器,这里腾讯的代码可能在浏览器针对性上不如瑞星的代码。当然也有可能是为了更多浏览器的兼容,而我还没有研究到



相关阅读:
ASP.NET 保留文件夹详解
九种方式打造安全的Win Server 2008
Cool Web Scrollbars - 定制网页的滚动条
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
网页制作中常用的Javascript代码
实例讲解JSP Model2体系结构(下)
Javascript中Eval函数的使用说明
解决Vista系统无法开启打印机共享的故障
在JavaScript中实现命名空间
PHP 图片管理程序集锦
Oracle教程:完全备份的SH文件
一段利用WSH获取登录时间的jscript代码
让IE可以变相支持CSS3选择器
PHP教程:PHP代码中的名称空间
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4