如何写一个CSS hack IE 11?

我如何才能破解或只写css IE 11?我有一个网站在IE 11中看起来很糟糕。我只是到处找，但还没有找到解决办法。

有css选择器吗?

当前回答

使用微软特定的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>

这样的过滤器工作的原因如下:

当用户代理无法解析选择器(即，它不是有效的css2.1)时，它必须忽略选择器和下面的声明块(如果有的话)。

<！doctype html > < html > < >头 <title>IE10/11 Media Query Test < meta charset = " utf - 8 " > <meta http-equiv="X-UA-Compatible" content="IE=edge"> <时尚> @media all and (-ms-high-contrast:none) ｛ .foo {color:绿色}/* IE10 */ *::-ms- background， .foo {color: red} /* IE11 */ ｝ > < /风格 < / >头 <身体> <div class="foo">嗨!!< / div > < /身体> < / html >

参考文献

我如何仅针对ie10的某些情况，如特定于Internet Explorer的CSS或特定于Internet Explorer的JavaScript代码? 微软CSS扩展 CSS 2.1:规则集、声明块和选择器

2014-02-28 02:53:47

其他回答

这里有一个两步解决方案下面是IE10和ie11的破解方法

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

因为IE10和IE11支持-ms-高对比度，你可以利用这个优势来瞄准这两个浏览器

如果你想排除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;
}

更多信息请参考本网站，威尔教程，克里斯教程

如果你想针对IE11及以后版本，以下是我的发现:

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

这里有一个获取更多信息的很好的资源:browserhacks.com

2014-04-01 13:58:28

你可以在样式标签中使用以下代码:

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

下面是一个对我有用的例子:

<style type="text/css">

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   #flashvideo {
        width:320px;
        height:240;
        margin:-240px 0 0 350px;
        float:left;
    }

    #googleMap {
        width:320px;
        height:240;
        margin:-515px 0 0 350px;
        float:left;
        border-color:#000000;
    }
}

#nav li {
    list-style:none;
    width:240px;
    height:25px;
    }

#nav a {
    display:block;
    text-indent:-5000px;
    height:25px;
    width:240px;
    }
</style>

请注意，由于(#nav li)和(#nav a)在@media屏幕之外…，它们是一般的款式。

2014-03-27 21:18:11

使用微软特定的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>

这样的过滤器工作的原因如下:

当用户代理无法解析选择器(即，它不是有效的css2.1)时，它必须忽略选择器和下面的声明块(如果有的话)。

参考文献

我如何仅针对ie10的某些情况，如特定于Internet Explorer的CSS或特定于Internet Explorer的JavaScript代码? 微软CSS扩展 CSS 2.1:规则集、声明块和选择器

2014-02-28 02:53:47

你可以使用js并在html中添加一个类来保持条件注释的标准:

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

或者使用像bowser这样的库:

https://github.com/ded/bowser

或者modernizr用于特征检测:

http://modernizr.com/

2014-02-09 14:44:02

我发现这很有帮助

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
    <script>
    $(function(){
        $('html').addClass('ie11');
    });
    </script>
<?php } ?>

将此添加到<head>文档下

2014-03-17 06:46:42

如何写一个CSS hack IE 11?

推荐文章

最新文章

标签