Css hack总结和解决方法

2012-03-25 20:52 臭小子1983 阅读(336) 评论(0) 编辑收藏举报

一、CSS HACK最佳应用方式

　　在开发页面的过程中，总会遇到这样那样的不兼容问题，在尽量避免使用一些兼容性很差的元素和样式后，往往还有细节上的不兼容问题，追求完美的前端工程师们就要采用css hack来解决问题了。

　　网上各种css hack资料很多，但是很多是有错误，或者不形象的，今天我来细致形象的总结一下他们，及最万无一失的用法~

　　所有效果均经过各个浏览器测试　　

　　首先，将要提及的css hack 有：_,*,\0,\9,\0\9,!important

　　各个hack的作用：

1、_ ：用于IE6　

1 background-color:blue;
2 _background-color:red;

复制代码

　　　　　　　　效果：

2、*和+：用于IE6,IE7

1 background-color:blue;
2 *background-color:red;

复制代码

1 background-color:blue;
2 +background-color:red;

复制代码

　　　　　　效果都为：

3、\0:用于IE8，IE9

1 background-color:blue;
2 background-color:red\0;

复制代码

　　　　　　　效果：

　　　　　　　　没错，在IE6下无法识别了~~~

4、\9:用于 IE6，IE7，IE8，IE9

1 background-color:blue;
2 background-color:red\9;

复制代码

　　　　　　　　效果：

5、\9\0:用于IE9

1 background-color:blue;
2 background-color:red\9\0;

复制代码

　　　　　　　　效果：　

　　　　　　没错IE6，又无法识别了~~~~

6、！important:用于所有浏览器--不能算做是hack了，不推荐使用哦

1 div{
2     background-color:red !important;
3 }
4 #test{
5     background-color:blue;
6 }

复制代码

　　　　　　　　效果：

　　　　　　　　加上！important 可以完全无视css优先级了~~~

二、什么是Haslayout？

　　　　顾名思义，它的意思就是 --- has layout，是IE下的特有属性，通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为“haslayout = -1”。

hasLayout是一种只读属性，有两种状态 true/false,当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。

什么时候表明Haslayout = false?
　　　　IE浏览器下的很多bug都是haslayout = false 引起的，所以出现下列问题，就很可能是haslayout跑出来捣鬼了。
　　　　　　1.文字消失，截断
　　　　　　2.边框消失
　　　　　　3.3像素偏差
　　　　　　4.绝对元素定位错误
　　　　　　5.滤镜不生效
　　　　　　6.滚动页面跳动
　　　　　　7其他（欢迎补充哦~）

haslayout = true？

　　haslayout是一种只读属性，不能人为设置，那该肿么办呢？

首先，IE下有一些元素是默认带着 haslayout属性的：
　　 <table>

　　 <td>

　　 <body>

　　 <img>

　　 <hr>

　　 <input>

　　 <embed>

其他的就只能通过设置css 属性来触发haslayout = true，注意哦，haslayout = true一旦触发是不可逆转的~

触发的css 目前总结有：（欢迎补充哦）
1.position:absolute
2.float:left/right
3.display:inline-block
4.width,height:除“auto”外的任意值
5.zoom:除"normal"外 ...

刷新页面返回顶部

臭小子1983

Css hack总结和解决方法

一、CSS HACK最佳应用方式

二、什么是Haslayout？

About