CSS Hack及经常使用的技巧

时间 2020-05-29

标签 css hack 经常使用技巧栏目 CSS 繁體版

原文原文链接

何谓CSS Hack？

不一样的浏览器，好比Internet Explorer 六、Internet Explorer 七、 Mozilla Firefox对CSS的解析认识不同，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。此时咱们须要针对不一样的浏览器写不一样的CSS，让它可以兼容不一样的浏览器，可以在不一样的浏览器中获得咱们想要的页面效果。针对不一样浏览器编写不一样CSS code的过程就叫CSS Hack，或叫写CSS Hack。html

不一样浏览器对CSS解析的差异以下：浏览器

!important能被IE七、FF识别，但不能被IE6识别
IE6支持"*" or "_"开头的CSS，IE7支持"*"开头的CSS，但不支持"_"开头的CSS，FF二者都不支持
"+"开头的CSS样式仅能被IE7识别
"\0"结束的CSS样式仅能被IE8识别
"\9"的CSS样式能被IE识别

【书写顺序：针对FF的样式放在最前面，针对IE7的样式放在中间，针对IE6的样式放在最后】

1. !importantspa

!important 指定样式应用规则的优先权，区别IE6与IE7，区别IE6与其它浏览器。firefox

.browserTest
{
border: 20px solid #60A179 !important;
border: 20px solid #00F;

} code

IE7和其它标准浏览器能识别!important，显示#60A179颜色，IE6不能识别!important，显示#00F颜色。htm

2. *blog

IE都能识别"*"，标准浏览器（如FF）不能识别"*"。it

区别IE与FF：io

.browserTest

{ border:20px solid #60A179; class

*border:20px solid #00F;

}

区别IE六、IE七、FF：

.browserTest
{
    border: 20px solid #60A179;
    border: 20px solid #00F !important;
    *border: 20px solid #fff;

}

3. _

IE6支持"_"，IE7和FF都不支持"_" 。区别IE六、IE七、FF：

.bowserTest {

border:20px solid #60A179;

*border:20px solid #00F;

_border:20px solid #fff;

}

4. *+html 与 *html

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

.browserTest { width: 120px; } /* FireFox fixed */
*html .browserTest { width: 80px;} /* ie6 fixed */
*+html .browserTest { width: 60px;} /* ie7 fixed */

*+html 对IE7的HACK 必须保证HTML顶部有以下声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">