合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

IE10 CSS Hack(顺便聊聊IE11的CSS Hack)

日期:2013-12-16  来源:攀枝花惠康网络公司

有IE就有hack,看看IE9的css hack,IE8的css hack;上次同事说一个页面IE10下?#24418;?#39064;,IE9下测试了一下,也有同样的问题。悲剧了赶紧找IE10的hack。

这个体例不是太完美,因为IE9和预览版的IE11也撑持media和\0的hack。

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

我们可以用IE私有的前提编译(conditional compilation)连系前提注释来供给针对ie10的Hack:该剧本琅缦沔的IE解除前提注释,以确保IE6-9不认可它,然后它功能检测到了名为@ cc_on。

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

请注重/*@cc_on ! @*/?#34892;?#30340;这个感伤号。

这是ie10尺度模式下的截图:

Snip20130702_1

这是ie10,IE8模式下的截图:

Snip20130702_2

google上翻到的IE10 CSS Hacks 还算斗劲适用的。记实一下以备后用。

一、特征检测:@cc_on

Snip20130702_4

考录到兼容往后的IE版本,好比IE11,js代码可以改一下:

JavaScript 123 if (/*@[email protected]*/false) {    document.documentElement.className+=' ie' + document.documentMode;}

关于document.documentMode可以查看IE的documentMode属性(IE8+新增)。

可能是想多了,实事上经测试预览版的IE11已经不撑持@ cc_on语句,不知道正式版会不会撑持。不外这样区分IE11却是一件好事。这样改削代码:

XHTML 1234567891011121314151617181920212223242526272829303132333435363738 <!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <title>无问题文档</title>    <!--[if !IE]><!--> (/*@[email protected]*/false) {            document.documentElement.className += ' ie' + document.documentMode;        }        // 针对IE11及非IE浏览器,        // 因为IE11下document.documentMode为11,所以html标签上会加ie11样式类;        // 而非IE浏览器的document.documentMode为undefined,所以html标签上会加ieundefined样式类。        if (/*@[email protected]*/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>eight: 19px;">此鱿负

JavaScript 123 if (/*@[email protected]*/true) {    document.documentElement.className += ' ie' + document.documentMode;}

呵呵,纯属YY,IE11正式版还不知道什么样子,而?#20197;?#29616;实的项目中跟着IE的逐渐尺度化,IE11和IE10可能很少用不到css hack。

二、@media -ms-high-contrast 体例

以上代码是针对IE11及非IE浏览器,因为:

  • IE11下document.documentMode为11,所以html标签上会加ie11样式类;
  • 而非IE浏览器的document.documentMode为undefined,所以html标签上会加ieundefined样式类。

这样把IE11也区扶持来了,IE11预览版下的截图:

IE10撑?#32622;?#20307;发芽,然后也撑持-ms-high-contrast这个属性,所以,我们可以用它来Hack IE10:

这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以?#23545;?#36825;个这个选择器下:

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

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

这种写法可以适配到高对比度和默认模式。所以可以笼盖到所有ie10的模式了。这种体例在预览版的IE11中也生效。

当然,体例二也可以和体例一一升引:

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

三、@media 0 体例


总之,跟着IE的逐渐尺度化,IE11和IE10可能很少用不到css hack,不看也罢,呵呵。

 

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
邮编:617200

合买大神 剑网3 论坛 3d玩法介绍及中奖规则 西班牙人队比赛武磊 卡迪夫城13号球员 摩纳哥王妃 赛尔号祖拉在那抓 莱加内斯队 天希狼队 新疆时时彩直播 皇家社会v皇家贝蒂斯