Question

我正在尝试在页面的head部分调用不同的样式表，具体取决于所使用的浏览器是否为IE。它是“灰色的”，但从我的理解，它仍然应该这样工作。除了一行之外，两个样式表是相同的。但是，它没有链接到mainIE.css而没有替换main.css。我做错了吗？

 <link href="examples/main.css" rel="stylesheet" type="text/css" />
 <!--[if IE]>
    <link href="examples/mainIE.css" rel="stylesheet" type="text/css" />
 <![endif]-->

Answer 1

首先，IE 10及更高版本不支持条件注释。这可能就是为什么你没有看到其他样式表加载。

其次，条件注释不会指示IE替换您的第一个样式表，只是为了加载另一个样式表。通常在第二个样式表中，您只需要放入差异，让CSS中的C为您处理。

Answer 2

尝试以下方法：

 <!--[if !IE]><!--><link href="examples/main.css" rel="stylesheet" type="text/css" /><!--<![endif]-->
 <!--[if IE]><link href="examples/mainIE.css" rel="stylesheet" type="text/css" /><![endif]-->

此外，我知道你可以在一个CSS文件中做同样的事情，如果只有一行是差异。

Answer 3

IE的第二个（＆＃39;评论＆＃39;）样式表将不替换现有的样式表。它作为注释添加，因此所有其他浏览器都忽略它，并且IE尝试使用此[if]语句查找注释以显示该内容。您的IE样式表可以简单地覆盖不同于整个样式表（ DRY ！）的单行，从而为IE用户保存重复下载。

IE的最新版本不再支持它们（http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/），否则您可以在此处找到更多信息：http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

[编辑：这是一个Javascript解决方案]

如果你只针对IE用户，你可以随时使用javascript。您可以执行以下操作：

var useragent = navigator.userAgent.toLowerCase();
var internetExplorer = (
    useragent.indexOf("trident") >= 0
    || useragent.indexOf("ms") >= 0
    || useragent.indexOf("ie") >= 0
) ? true : false;
if(internetExplorer){
    // do whatever you want here, like...
    document.getElementById("myElement").style.height = "100px";
}

[EDIT2：]实际上，如果它的IE：

你可以写样式表

if(internetExplorer){
    document.write('<link href="examples/main.css" rel="stylesheet" type="text/css" />');
}

Answer 4

如上所述，条件评论在ie10 +中不起作用;你需要使用条件编译来定位它们...据说，我不确定如何区分ie10,11和手机，但我敢打赌你可以简单地检查你的jscript版本。这是一个条件编译的演示
http://dev.bowdenweb.com/ua/browsers/ie/conditional-compilation.html

检查IE并链接到不同的样式表

4 个答案: