为了账号安全,请及时绑定邮箱和手机立即绑定

如何为IE 11编写CSS hack?

/ 猿问

如何为IE 11编写CSS hack?

30秒到达战场 2019-10-23 13:16:46

如何仅为IE 11破解或编写CSS?我有一个在IE 11中看起来很糟糕的网站。我只是在这里和那里搜索,但尚未找到任何解决方案。


是否有任何CSS选择器?


查看完整描述

3 回答

?
一只甜甜圈

结合使用Microsoft特定的CSS规则来过滤IE11:


<!doctype html>

<html>

 <head>

  <title>IE10/11 Media Query Test</title>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <style>

    @media all and (-ms-high-contrast:none)

     {

     .foo { color: green } /* IE10 */

     *::-ms-backdrop, .foo { color: red } /* IE11 */

     }

  </style>

 </head>

 <body>

  <div class="foo">Hi There!!!</div>

 </body>

</html>

之所以这样的过滤器,是因为以下原因:


当用户代理无法解析选择器时(即,它不是有效的CSS 2.1),它必须忽略选择器以及随后的声明块(如果有)。


<!doctype html>

<html>

 <head>

  <title>IE10/11 Media Query Test</title>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <style>

    @media all and (-ms-high-contrast:none)

     {

     .foo { color: green } /* IE10 */

     *::-ms-backdrop, .foo { color: red } /* IE11 */

     }

  </style>

 </head>

 <body>

  <div class="foo">Hi There!!!</div>

 </body>

</html>


查看完整回答
反对 回复 2019-10-23
?
春华秋衣

鉴于线程的发展,我更新了以下内容:


IE 11(及更高版本)

_:-ms-fullscreen, :root .foo { property:value; }

IE 10以上

_:-ms-lang(x), .foo { property:value; }

要么


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

   .foo{property:value;}

}

仅限IE 10

_:-ms-lang(x), .foo { property:value\9; }

IE 9以上

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {

  //.foo CSS

  .foo{property:value;}

}

IE 9和10

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

    .foo /* backslash-9 removes.foo & old Safari 4 */

}

仅限IE 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 

 //.foo CSS

 .foo{property:value;}

}

IE 8,9和10

@media screen\0 {

    .foo {property:value;}

}

仅限IE 8标准模式

.foo { property /*\**/: value\9 }

IE 8

html>/**/body .foo {property:value;}

要么


@media \0screen {

    .foo {property:value;}

}

IE 7

*+html .foo {property:value;}

要么


*:first-child+html .foo {property:value;}

IE 6、7和8

@media \0screen\,screen\9 {

    .foo {property:value;}

}

IE 6和7

@media screen\9 {

    .foo {property:value;}

}

要么


.foo { *property:value;}

要么


.foo { #property:value;}

IE 6、7和8

@media \0screen\,screen\9 {

    .foo {property:value;}

}

IE 6

* html .foo {property:value;}

要么


.foo { _property:value;}

Javascript替代品

现代化

Modernizr在页面加载时快速运行以检测功能。然后使用结果创建一个JavaScript对象,并将类添加到html元素


用户代理选择

Javascript:


var b = document.documentElement;

        b.setAttribute('data-useragent',  navigator.userAgent);

        b.setAttribute('data-platform', navigator.platform );

        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

在html元素中添加(例如)以下内容:


data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'

data-platform='Win32'

允许目标明确的CSS选择器,例如:


html[data-useragent*='Chrome/13.0'] .nav{

    background:url(img/radial_grad.png) center bottom no-repeat;

}

脚注

如果可能的话,找出并解决所有问题,避免被黑客入侵。支持渐进增强和平稳降级。但是,这并非总是可以实现的“理想世界”场景,因此,上述内容应有助于提供一些不错的选择。


查看完整回答
反对 回复 2019-10-23
?
一只名叫tom的猫

这是两个步骤的解决方案,这里是IE10和11的黑客


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

   /* IE10+ specific styles go here */  

}

因为IE10和IE11支持-ms-high-cotrast,所以您可以利用此优势来定位这两个浏览器


如果要从其中排除IE10,则必须创建IE10特定代码,如下所示,它使用用户代理技巧,您必须添加此Javascript


var doc = document.documentElement;

doc.setAttribute('data-useragent', navigator.userAgent);

和这个HTML标签


<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

现在您可以像这样编写CSS代码


html[data-useragent*='MSIE 10.0'] h1 {

  color: blue;

}

欲了解更多信息,请访问该网站wil tutorail,Chris Tutorial


如果您要定位IE11和更高版本,这是我发现的内容:


_:-ms-fullscreen, :root .selector {}


查看完整回答
反对 回复 2019-10-23

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信