IE8 中最小宽度的奇怪行为

Question

我有一个简单的要求； 将 desktop.css 应用于更大的屏幕尺寸和 将 iPad.css 应用于更小的屏幕尺寸

现在我想为这些使用 CSS 媒体查询。

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css\desktop.css">
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="css\ipad.css">

现在我了解到旧版 IE 不支持最小宽度。但是我在 IE8 中看到了一种奇怪的支持 即 IE8 将 min-width 识别为属性，但不识别为媒体查询。

所以

#example{*min-width:100px;}

在 IE8 中运行良好

但这不是

@media only screen and (min-width:100px) 

我已经为 IE 尝试了以下方法

<!--[if IE ]><link rel="stylesheet" media="screen" href="css\desktop.css"><![endif]-->

但我只想以特定的最小宽度应用 IE 桌面 css，而不是总是......

是否有类似的 JS 解决方法；

<!--[if IE AND min-width:100px]><link rel...

请告诉我如何在 IE 中应用 2 组 CSS。

Answer 1

Media queries are only supported by IE9+. 您可以使用像 Respond.js 这样的 polyfill 来实现 IE6-8 兼容性。