问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何为 IE 11 编写 CSS hack？

社区维基
1
新手上路，请多包涵

如何仅针对 IE 11 破解或编写 css？我有一个在 IE 11 中看起来很糟糕的网站。我只是到处搜索，但还没有找到任何解决方案。

有没有css选择器？

原文由 user2135651 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译csscss-selectorsinternet-explorer-11
阅读 490
2 个回答
得票最新
社区维基
1
✓ 已被采纳

使用 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>

参考

原文由 Paul Sweatte 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

鉴于不断发展的线程，我更新了以下内容：

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 }

浏览器 8

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

要么

@media \0screen {
    .foo {property:value;}
}

浏览器 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;}
}

浏览器 6

 * html .foo {property:value;}

要么

.foo { _property:value;}

Javascript 替代品

现代主义

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

用户代理选择

Java脚本：

 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;
}

脚注

如果可能，请在不使用 hack 的情况下识别并修复任何问题。支持 渐进增强 和 优雅降级。然而，这是一个“理想世界”场景，并非总能获得，因此，上述内容应该有助于提供一些不错的选择。

归因/基本阅读

原文由 SW4 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题