IE浏览器生效的CSS 与其他浏览器区别对待

蔚落 2022-09-02 08:01 115阅读 0赞

## 本文转载自 https://blog.csdn.net/Caroline\_Yang/article/details/106662172 ##

## [点击去原文][Link 1] ##

前言：IE一直是特殊的一个浏览器，我们可以使用一些方法来指定样式表只在IE浏览器下被加载。

**IE9以及低于IE9版本 :**

可以使用条件注释语句来加载特定于ie的样式表。如下所示，使用外部样式表。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>&lt;!--[if IE]&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;link rel="stylesheet" type="text/css" href="all-ie-only.css" /&gt;</code></p> <p><code>&lt;![endif]--&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

但是如果是IE10以上时，这个办法就不是很适用了。

**IE10或IE11:**

使用媒体查询（-ms-high-contrast）来加载样式表。由于-ms-high-contrast是微软特有的(并且只在IE 10+中可用)，所以只能在Internet Explorer 10或更高版本中解析。

[?][Link 2]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>@media </code><code>all</code> <code>and (-ms-high-contrast: </code><code>none</code><code>), (-ms-high-contrast: active) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/* IE10+ CSS styles go here */</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

微软 Edge12 :可以使用@supports

[@supports][supports]的参考文章

[?][Link 2]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>@supports (-ms-accelerator:true) { </code></p> <p><code>&nbsp;&nbsp;</code><code>/* IE Edge 12+ CSS styles go here */</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://blog.csdn.net/Caroline_Yang/article/details/106662172
[Link 2]: https://www.jb51.net/css/659629.html#
[supports]: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports