CSS hack

时间 2019-12-08

标签 css hack 栏目 CSS 繁體版

原文原文链接

CSS hack

　　在这个浏览器百花争鸣的时代，做为前端开发的咱们为了咱们漂亮的设计能适应各个浏览器可为煞费苦心，主要体如今javascript和css上面。javascript我此次就不谈了，先说说css。javascript

　　为了适应不一样浏览器不一样的版本（版本主要就ie来讲），ie这朵奇葩之前咱们要兼容6-9，而如今10也出来了，在ie下咱们能够写条件注释来区分ie和其余浏览器，以及ie的版本，这些请你们自行去搜索吧。不过ie10这朵奇葩，丫的竟然不支持条件注释。在这里向ie 10 的开发工程师的全家问“好”。css

Ok，废话很少说了。直接上代码。html

.test{前端

background: #f00; /*各浏览器都认识，主要给高级浏览器用*/java

background: blue\0; /*ie十、九、8*/浏览器

background: red\9; /*全部的 ie*/app

background:#F60\0\9; /*\0\9 或 \9\0 IE8*/测试

+background: yellow; /*ie七、6 +号同*号 */spa

_background:black; /*ie6*/设计

}

:root .test{background: blue\9;} /*ie9*/

background: #f00; 各浏览器都认识，主要给高级浏览器用

background: blue\0; 网上说是给IE8的，不过通过测试，IE十、九、8都认识他。

background:#F60\0\9; 这个东西是给IE8 玩的

background: red\9; 这个东西好玩了，全部的ie都认识他。

+background: yellow; *或+ 留给了IE七、6 这一点仍是不错的

_background:black; _专门留给神奇的ie6

:root .test{background: blue\9;} :root是给ie9的，网上流传了个版本是 :root #test { background:blue\0;}，新版opera也认识，因此通过反复验证最终ie9特有的为:root 选择符 {属性\9;}

而最奇葩的实际上是IE10，检测IE10有三种方法：

No.1 特性检测：@cc_on

咱们能够用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：

<!--[if !IE]><!--<script>

if (/*@cc_on!@*/false) {

document.documentElement.className+=' ie10';

}

</script>

请注意/*@cc_on ! @*/中间的这个感叹号。

这样就能够在ie10中给html元素添加一个class=”ie10″，而后针对ie10的样式能够卸载这个这个选择器下：

.ie10 .test {

/* IE10-only styles go here */

}

条件编译支持全部版本的ie浏览器，而其它浏览器不支持。可是颇有可能之后IE11出来后，这种方法就失效了。。。

须要注意的是，条件编译不支持Windows store中的app中使用，只支持在IE浏览器中使用。

固然，咱们也能够用传统的用ua给ie10中html元素添加class的方法来实现。

No.2@media -ms-high-contrast

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

/* IE10-specific styles go here */

.test{background: #ffcccc;}

}

这种写法能够适配到高对比度和默认模式。因此能够覆盖到全部ie10的模式了。

而后这种方式可能也会在后面的IE11中生效。

固然，方法二也能够和方法一一块儿用：

然而这个东西若是遇到了IE9的root 就很差用了。

No.3：@media 0

这个有些变态了，并且不太完美，由于IE9也支持media，也支持\0的hack：

@media screen and (min-width:0\0) {

/* IE9 and IE10 rule sets go here */

}

不过，估计后面ie10也会普及到Windows 7平台，因此ie9会消失，只是看看ie8和ie7的份额，这种状况可能不会发生吧。。。

总结：

上面这么一大坨，看起来乱乱的，在此为你们提供了一个相对来讲较好的方法：

<!doctype html>

<html>

<head>

　　<meta charset="utf-8">

　　<title>document</title>

　　<style>

　　.test{

　　width: 300px;

　　height: 300px;

　　background: #f00;   /*各浏览器都认识，主要给高级浏览器用*/

　　background: blue\0; /*ie十、九、8*/

　　background: red\9; /*全部的 ie*/

　　+background: yellow; /*ie七、6 +号同*号 */

　　_background:black; /*ie6*/

　　}


　　:root .test{background: blue\9;} /*ie9*/

　　.ie10 .test{background: #ffcccc;} /*ie10  (js 专属)*/

　　</style>

　　<script type="text/javascript">

　　//ie 10
　　
　　if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {

    document.documentElement.className += "ie10";

　　}

　　</script>

</head>

<body>

<div class="test">test</div>

</body>

</html>

若是运行代码有问题，请你们能够保存成html。

PS：仍是那句话，咱们能不用hack就不用hack。

PPS：文章部门内容来自前端观察

1. css hack hack
2. CSS之CSS hack
3. CSS Hack
4. CSS HACK
5. css hack
6. CSS hack
7. css HACK
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• 适用于PHP初学者的学习线路和建议