关于CSS Hack与清除浮动

一、CSS HACK   

以下两种方法几乎能解决现今所有HACK.   

1、!important   

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

<style> #wrapper { width: 100px!important; width: 80px; } </style>   

2、 IE6/IE77对FireFox  

 *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

 <style> #wrapper { #wrapper { width: 120px; } *html #wrapper { width: 80px;} *+html #wrapper { width: 60px;} } </style>

注意:   *+html 对IE7的HACK 必须保证HTML顶部有如下声明:   

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ””>

 二、float 闭合(清除浮动)   <div></div>

clearfix就是清除浮动,方法有很多种
1、来自YUI,代码简洁优雅、有语义、兼容性强,推荐使用。
程序代码 程序代码
.clearfix:after{content:’.’;display:block;height:0;clear:both}
.clearfix{zoom:1}

2、其它
程序代码 程序代码
.clearfix:after {content: “.”;display: block; height: 0; clear: both; visibility: hidden;
}

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
另外:清除浮动的种类列举
  1、采用伪类:after进行后续空制的高度位零的伪类层清除
  2、采用CSS overflow:auto的方式撑高
  3、采用CSS overflow:hidden的方式产生怪异适应
  4、采用display:table将对象变成table形式
  5、采用div标签,以及css的clear属性
  6、采用br标签,以及css的clear属性
  7、采用br标签,以及其自身HTML的clear属性

赞 (0)
分享到:更多 ()