【问题标题】:Conditional CSS not loaded by IE7 and IE8IE7 和 IE8 未加载条件 CSS
【发布时间】:2011-08-27 16:57:21
【问题描述】:

我编写了一堆 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 中加载。它似乎完全忽略了该样式表。

然后我尝试将条件语句更改为&lt;!-- [if IE 8]&gt;,但这没有任何效果。

最后,我完全删除了条件语句,得到以下代码:

<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是可以的。只是看起来我的条件语句没有被触发。

任何想法我做错了什么?

【问题讨论】:

  • 不确定这是否是问题所在,但请尝试删除空格。 &lt;!-- [if lt IE 9]&gt; --> &lt;!--[if lt IE 9]&gt;

标签: html css internet-explorer-8 internet-explorer-7


【解决方案1】:

删除空格。这打破了conditional syntax。否则,IE 会将其视为普通评论。

<!--[if IE 8]>
...
<![endif]-->

【讨论】:

  • 谢谢,这就是问题所在! (注意:修改你的结尾评论,应该是&lt;![endif]--&gt;
猜你喜欢
  • 2014-05-01
  • 1970-01-01
  • 1970-01-01
  • 2011-06-13
  • 1970-01-01
  • 2011-06-20
  • 1970-01-01
  • 2012-12-09
  • 1970-01-01
相关资源
最近更新 更多