IE7 和 IE8 未加载条件 CSS
我编写了一堆 CSS，使我的网站首先针对移动设备，然后使用 CSS 媒体查询加载另一个用于桌面浏览器的样式表。我这样做是因为有很多移动浏览器不理解 CSS 媒体查询，而且桌面用户更有可能拥有支持此功能的现代浏览器。
我有以下适用于所有现代浏览器（IE9、Chrome、Firefox 3.6+、Safari 4+5）的 CSS：
然后我意识到 IE7 和 IE8 不支持 CSS 媒体查询，因此上述内容不起作用。所以我添加了一个条件语句来加载它：
<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/>
<!-- [if lt IE 9]>
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" />
<! [endif] -->
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="only screen and (min-width: 640px)" />
但是，使用 IE Tester 和 Browsershots，我已经确认 desktop.css 未在 IE 7 和 8 中加载。它似乎忽略了该样式表完全地。
然后我尝试将条件语句更改为
最后，我完全删除了条件语句，生成了以下代码：
<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/>
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" />
最后一次尝试导致我的desktop.css 在 IE7 和 IE8 中加载。所以这就证明CSS是没问题的。只是看起来我的条件语句没有被触发。
有什么想法我做错了吗？
I have a bunch of CSS written that makes my site target Mobile first, then I use CSS Media Queries to load another stylesheet for desktop browsers. I do this since there are so many mobile browsers that don't understand CSS Media Queries, and it's more likely that desktop users have modern browsers that support this.
I have the following CSS that works in all modern browsers (IE9, Chrome, Firefox 3.6+, Safari 4+5):
I then realized that IE7 and IE8 don't support CSS Media Queries so the above wouldn't work. So I added a conditional statement to load it:
<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/>
<!-- [if lt IE 9]>
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" />
<! [endif] -->
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="only screen and (min-width: 640px)" />
However, using IE Tester and Browsershots, I've confirmed that the desktop.css is not loading in IE 7 and 8. It seems to be ignoring that stylesheet completely.
I then tried changing the conditional statement to <!-- [if IE 8]> but that didn't have any effect.
Lastly, I removed the condition statement altogether, resulting in this code:
<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/>
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" />
This last attempt results in my desktop.css being loaded in IE7 and IE8. So this proves the CSS is OK. Just looks like my conditional statement isn't being triggered.
Any ideas what I'm doing wrong?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
删除空格。这破坏了条件语法。否则，IE 会将其视为普通注释。
Remove the spaces. This breaks the conditional syntax. Otherwise, IE is treating it like a normal comment.