阅读量:0
``
css，/* IE8 */，.selector { color: red\0/; }，，/* IE7 */，*:firstchild+html .selector { color: green\0/; }，，/* IE6 */，* html .selector { color: blue\0/; }，，/* FF */，@mozdocument urlprefix() {， .selector { color: orange; }，}，``在网页设计和开发过程中，跨浏览器兼容性一直是一个重要且棘手的问题，特别是对于微软的Internet Explorer（IE）浏览器系列，由于其不同版本之间的差异以及与其他现代浏览器如Firefox、Chrome等的差异，使得开发者需要使用CSS Hacks来确保网页在各个浏览器中都能正确显示，以下是针对IE8、IE7、IE6和Firefox的一些简单CSS Hack测试：
1、颜色样式hack
基本定义：
```css
p { color: #f00; }
```
```html
<p>文字</p>
```
测试结果：
IE6不支持此hack。
IE7和IE8支持此hack。
Firefox2.0.0.12不支持此hack。
2、高级选择器hack
基本定义：
```css
* html p { color: #f00; }
* html p { color: #f00; }
p { *color: #f00; }
```
```html
<p>文字</p>
```
测试结果：
第一个选择器支持IE6，不支持Firefox、IE7和IE8。
第二个选择器支持IE7和IE8，不支持Firefox和IE6。
第三个选择器支持IE7和IE6，不支持Firefox和IE8。
3、属性hack
透明度问题：
IE8中border的transparent不被支持。
zindex BUG：原有zindex BUG依旧存在。
lineheight BUG：IE8中产生新的lineheight BUG。
display:table：IE8中display:table依旧不支持。
Listitem whitespace bug：IE的Listitem whitespace bug在IE8中依旧存在。
4、优先级hack
基本定义：
```css
color: brown !important; /* 用于Opera、Firefox2、Firefox3等现代浏览器 */
> color: green !important; /* IE7、IE8可以识别该规则 */
color: red; /* 所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则 */
```
测试结果：
Opera、Firefox2、Firefox3等现代浏览器显示为棕色。
IE7和IE8显示为绿色。
IE6显示为红色。
5、下划线hack
基本定义：
```css
background: orange; *background: blue; _background: green;
```
测试结果：
IE6显示为绿色。
IE7显示为蓝色。
Firefox显示为橙色。
以下是关于CSS hacks的两个常见问题及其解答：
问题1：为什么需要使用CSS hacks？
答案：由于不同浏览器对CSS标准的支持程度不同，特别是在旧版本的IE浏览器中，很多CSS属性和选择器的表现与其他现代浏览器有很大差异，为了确保网页在各个浏览器中都能正常显示，开发者需要使用CSS hacks来针对不同浏览器应用特定的样式规则。
问题2：如何避免过多的CSS hacks？
答案：虽然CSS hacks在某些情况下是必要的，但过度依赖hacks会使代码变得难以维护，为了避免过多的hacks，可以采取以下措施：
1、使用CSS reset：通过CSS reset文件来统一不同浏览器的默认样式。
2、渐进增强：先为所有浏览器应用基本的样式，然后逐步为现代浏览器添加高级样式。
3、使用Polyfills：对于一些不兼容的CSS特性，可以使用JavaScript Polyfills来填补这些空白。
通过上述方法和hacks，开发者可以更好地应对跨浏览器兼容性问题，确保网页在各个浏览器中都能正常显示。
CSS Hack 测试结果
1. IE8
条件注释：<![if lt IE 8]>
用于测试：backgroundcolor: red;
测试结果：在IE8浏览器中，背景色不会变为红色。
属性选择器：* html .class
用于测试：.class { backgroundcolor: red; }
测试结果：在IE8浏览器中，背景色不会变为红色。
属性值选择器：_class
用于测试：.class { backgroundcolor: red; }
测试结果：在IE8浏览器中，背景色不会变为红色。
2. IE7
条件注释：<![if lt IE 7]>
用于测试：backgroundcolor: red;
测试结果：在IE7浏览器中，背景色不会变为红色。
属性选择器：* html .class
用于测试：.class { backgroundcolor: red; }
测试结果：在IE7浏览器中，背景色不会变为红色。
属性值选择器：_class
用于测试：.class { backgroundcolor: red; }
测试结果：在IE7浏览器中，背景色不会变为红色。
3. IE6
条件注释：<![if lt IE 6]>
用于测试：backgroundcolor: red;
测试结果：在IE6浏览器中，背景色不会变为红色。
属性选择器：* html .class
用于测试：.class { backgroundcolor: red; }
测试结果：在IE6浏览器中，背景色不会变为红色。
属性值选择器：_class
用于测试：.class { backgroundcolor: red; }
测试结果：在IE6浏览器中，背景色不会变为红色。
4. Firefox (FF)
条件注释：无
用于测试：backgroundcolor: red;
测试结果：在Firefox浏览器中，背景色会变为红色。
属性选择器：无
用于测试：.class { backgroundcolor: red; }
测试结果：在Firefox浏览器中，背景色会变为红色。
属性值选择器：无
用于测试：.class { backgroundcolor: red; }
测试结果：在Firefox浏览器中，背景色会变为红色。
IE8、IE7、IE6浏览器都支持条件注释和属性选择器进行Hack。
Firefox (FF) 浏览器不支持上述CSS Hack方法，但可以使用标准CSS代码进行样式设置。
