csshack技术

CSS Hack技术是CSS中一种常用的技术手段，它可以通过针对特定的浏览器，实现对不同浏览器执行不同的样式。由于不同厂商浏览器厂商的差异，有时候同样的CSS样式在不同浏览器上呈现的效果是不同的，而Hack技术则可以帮助我们克服这些问题，更加精确地实现页面效果一致性。

目前前端开发人员需要考虑如下浏览器兼容：

IE6, IE7, IE8, IE9 (兼容模式)

webkit浏览器：Chrome, Safari

Firefox浏览器

Opera浏览器

Hack技术主要用在下面的场景：

CSS Hack技术可用于针对不同浏览器的兼容性问题，在CSS文件中针对特定浏览器写出不同的CSS样式，用于保证在各种浏览器下页面呈现的效果相同。

下面介绍 CSS Hack技术的几种方式：

1.选择器Hack：

/* 仅IE6下生效 */

* html #test {

color:red;

}

/* IE6-IE7 */

*:first-child+html #test {

color:green;

}

/* IE7 */

*:first-child+html #test {

color:blue;

}

上面的代码中，通过不同的选择器写出了不同的样式表，可以根据需要进行选择性使用。IE6或更低版本可以使用“* html” 选择器实现，IE6或更高版本，可以利用IE6或IE7处理选择器的技巧：运用 +html, \9, *+html 三种方法。在IE6中，当使用 * html 的选择器时，只有IE才能识别；在IE7中，当使用 *+html 的时候，IE6无法识别，IE7可以识别，其他浏览器不识别。

2.属性Hack：

/* IE6 */

#test {

_color:yellow; /* 注意，前面有下划线 */

}

/* IE6-IE7 */

#test{

color:blue !ie; /*注意IE6-IE7一定要写上 !ie 这个后缀了*/

color:red; /* 不带 !ie 者为高版本浏览器生效，在IE6-IE7中 color:red 不生效 */

}

/* IE7, IE6不生效 */

#test{

color:red;

color:blue\0;

}

基于不同的浏览器属性解释方式的不同，我们可以通过 Hack 技术写出不同的 CSS 样式规则。最常见的当属 " _ " 加属性方法、" : "加IE私有属性方法和 IE CSS 字符串方法。其中第一种方法在 IE6 中有效，第二种方法在 IE6、IE7 中有效，第三种方法在 IE6、IE7、IE8、IE9 均有效。

3.CSS条件Hack：

/* 仅IE6 */

#test {

color:#f00;

_color:#00f;

}

@media \0screen\,screen\9{

#test{

color:hsl(0,0%,0%); /* IE6属性值 */

color:#0f0\0; /* IE8属性值 */

}

}

通过写一些条件判断语句，就可以针对不同的浏览器写出不同的 CSS 样式规则。在上面的例子中，我们可以用 @media 媒体查询规则加上 CSS 正确识别浏览器的 Hack，来帮助我们完成 IE6 和 IE8 差异间的布局。

4.JavaScript Hack：

通过javascript判断浏览器类型，根据浏览器类型动态插入CSS样式文件。

可以使用document.createStyleSheet() 方法动态加载CSS 模板 ，可以根据1、浏览器 CSS优先级；2 可以安装的样式表数限制为 31个 左右，依然保证了正确的CSS处理方式(只适用于IE)。

以下是一个例子：

//判断是否是IE浏览器

var isIE = !!window.ActiveXObject || "ActiveXObject" in window;

//动态引入CSS

if (isIE) {

document.createStyleSheet('ie.css');

} else {

var cssLink = document.createElement("link");

cssLink.href = "test.css";

cssLink.rel = "stylesheet";

cssLink.type = "text/css";

var head = document.getElementsByTagName("head")[0];

head.appendChild(cssLink);

}

总结：

虽然 Hack 技术会因为浏览器版本迭代而出现一些问题，但是在特定场景下，Hack 技术仍然是我们必不可少的一种优化方式。但是，我们时刻提醒自己，合理使用 Hack 技术，做到降低 Hack 技术对代码的侵害，提高代码的可维护性。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/