IE10 CSS Hack详细介绍及IE11的CSS Hack提早掌握

日期:2020-10-22 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

有IE就有hack,看看IE9的css hack,IE8的css hack;之前朋友说1个网页页面IE10下有难题,IE9下检测了1下,也是有一样的难题。不幸了赶快找IE10的hack。

google上翻到的IE10 CSS Hacks 还算较为好用的。纪录1下以备后用。

1、特点检验:@cc_on

大家能够用IE独享的标准编译程序(conditional compilation)融合标准注解来出示对于ie10的Hack:该脚本制作里边的IE清除标准注解,以保证IE6⑼不认可它,随后它作用检验到了名为@ cc_on。

拷贝编码
编码以下:

<!--[if !IE]><!--><script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->

请留意/*@cc_on ! @*/正中间的这个感慨号。

这样便可以在ie10中给html元素加上1个class=”ie10″,随后对于ie10的款式能够卸载这个这个挑选器下:

拷贝编码
编码以下:

.ie10 .example {
/* IE10-only styles go here */
}

这是ie10规范方式下的截图:
 
这是ie10,IE8方式下的截图:
 
考录到适配之后的IE版本号,例如IE11,js编码能够改1下:

拷贝编码
编码以下:

if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie' + document.documentMode;
}

有关document.documentMode能够查询IE的documentMode特性(IE8+新增)。

将会是想多了,实事上经检测预览版的IE11早已不适用@ cc_on句子,不知道道宣布版会不容易适用。但是这样区别IE11倒是1件好事儿。这样改动编码:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf⑻">
<title>无题目文本文档</title>
<!--[if !IE]><!-->
<script>
// 对于IE10
if (/*@cc_on!@*/false) {
document.documentElement.className += ' ie' + document.documentMode;
}
// 对于IE11及非IE访问器,
// 由于IE11下document.documentMode为11,因此html标识上会加ie11款式类;
// 而非IE访问器的document.documentMode为undefined,因此html标识上会加ieundefined款式类。
if (/*@cc_on!@*/true) {
document.documentElement.className += ' ie' + document.documentMode;
}
</script>
<!--<![endif]-->
<style type="text/css">
.ie10 .testclass {
color: red
}
.ie11 .testclass {
color: blue
}
.ieundefined .testclass {
color: green
}
</style>
</head>
<body>
<div class="testclass">
test text!
</div>
</body>
</html>

在其中:

拷贝编码
编码以下:

if (/*@cc_on!@*/true) {
document.documentElement.className += ' ie' + document.documentMode;
}

以上编码是对于IE11及非IE访问器,由于:

IE11下document.documentMode为11,因此html标识上会加ie11款式类;
而非IE访问器的document.documentMode为undefined,因此html标识上会加ieundefined款式类。

这样把IE11也区别出来了,IE11预览版下的截图:
 
呵呵,纯属YY,IE11宣布版还不知道道甚么模样,并且在具体的新项目中伴随着IE的慢慢规范化,IE11和IE10将会非常少用不到css hack。

2、@media -ms-high-contrast 方式

IE10适用新闻媒体查寻,随后也适用-ms-high-contrast这个特性,因此,大家能够用它来Hack IE10:

拷贝编码
编码以下:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}

这类写法能够兼容到高比照度和默认设置方式。因此能够遮盖到全部ie10的方式了。这类方法在预览版的IE11中也起效。

自然,方式2还可以和方式11起用:

拷贝编码
编码以下:

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
document.documentElement.className += "ie10";
}

3、@media 0 方式

这个方式并不是太完善,由于IE9和预览版的IE11也适用media和\0的hack。

拷贝编码
编码以下:

@media screen and (min-width:0\0) {
/* IE9 , IE10 ,IE11 rule sets go here */
}

总而言之,伴随着IE的慢慢规范化,IE11和IE10将会非常少用不到css hack,不要看也罢,呵呵。