Question

有没有办法在兼容模式下添加一个仅适用于IE8的css，但是如果IE7或IE8或（显然任何其他浏览器）都没有？

我的CSS很简单

h1 {
   font-size:14px;
}

但必须使用font-size必须仅适用于IE8（兼容模式）

注意：我知道如何写一个条件语句来发现IE8 ...但我不知道如何为IE8兼容模式做这件事。

Answer 1

针对IE8的CSS攻击，如下所示：

h1{font-size:14px\0;}

Answer 2

不幸的是，没有办法只适用于IE8兼容模式。但是，IE8CM将显示完全相同的IE7，因为它是IE7模拟器。您可以使用类似下面的代码，但它也适用于IE7：

<!--IE9 compatibility mode & IE8:-->
  <!--[if IE 8]>
    <p>Welcome to Internet Explorer 8.</p>
  <![endif]-->

<!--IE8 compatibility mode & IE7:-->
  <!--[if IE 7]>
    <p>Welcome to Internet Explorer 7.</p>
  <![endif]-->

有什么理由不适用于IE7吗？在IE7中也应该需要任何能够解决IE8中的问题兼容模式的黑客攻击。

Answer 3

您应该在代码中的html标记之前添加以下代码：

<!--if IE 8>
<html class="IE8">
<[endif]-->
<html>
...
</html>

在CSS文件中，执行以下操作：

.IE8 h1{
font-size:14px;
}

这仅适用于IE8。

Answer 4

使用css hack：

     body{
         color:red;           /*every browser*/
         color:blue\9;        /*IE8 or below*/
     }

Answer 5

兼容模式，除非修改后的DocType呈现为IE 7或更低版本，因此如果它处于兼容模式，它通常也会在IE 7中呈现。

但是，您仍然可以这样做：如果您检查用户代理字符串，则可以通过这种方式区分它。 IE 8和更新版本在用户代理字符串中包含“Trident”一词，因此如果它呈现为IE 7或更低版本，但是Trident确实显示在uagent中，那么它必须处于兼容模式。

虽然大多数人都不会发现这一点，但我确实有理由这样做。在我以前的一个项目中，需要告诉人们使用兼容模式选项，直到我们能够修改我们的应用程序来处理新的浏览器。不是每个人都会阅读说明，因此弹出的信息通常是告诉人们该做什么的最佳方式。

我编写并放在文档头部的脚本的这个修改版本可以解决这个问题：

<script language="javascript" type="text/javascript"> 
if (!!navigator.userAgent.match(/MSIE/i)) { 
   ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':''; } 
</script>

那么javascript变量ie_mode将被设置为：“ie_compatibility_mode”或“not_ie_compatibility_mode”

如果你要添加document.documentElement.className + = ie__mode;到脚本，以便将css类添加到文档本身，如下所示：

<script language="javascript" type="text/javascript"> 
if (!!navigator.userAgent.match(/MSIE/i)) { 
   ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':'';
document.documentElement.className+=ie__mode; } 
</script>

然后你就可以在文档中使用css用于任一模式。示例样式：

<style type="text/css">

    html { color:#000000; }

    /* default settings: start with all items 'off' */

    .hide_element { display:none; visibility:hidden; }

    .ie_compatibility_mode .display_compatibility_mode { visibility:visible; display:block; color:#FF9900; }

    .not_ie_compatibility_mode .display_not_compatibility_mode { visibility:visible; display:block; color:#666666; }

</style>

然后在身体中你可以这样做：

<body>

If you are using internet explorer there will be more here: 

<br><br>

<script language="javascript" type="text/javascript"> 
    if (document.documentMode) document.write("which ie mode: "+document.documentElement.className);
</script>

<br><br>

<div class="hide_element display_compatibility_mode">
   This is in compatibility mode. [this should show up in orange]
</div>

<div class="hide_element display_not_compatibility_mode">
   This is not in compatibility mode. [this should be show up in blue]
</div>

</body>

这是完整的工作页面，其中包含所有部分：

<!DOCTYPE html>
<html>
<head>
<title>HTML Class Setting / Detect Compatibility Mode Example - Jeff Clayton</title>

<script language="javascript" type="text/javascript"> 
if (!!navigator.userAgent.match(/MSIE/i)) { 
   ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':'';
document.documentElement.className+=ie__mode; } 
</script>

<style type="text/css">

/* default settings: start with all items 'off' */

.hide_element { display:none; visibility:hidden; }

.ie_compatibility_mode .display_compatibility_mode { visibility:visible; display:block; color:#FF9900; }

.not_ie_compatibility_mode .display_not_compatibility_mode { visibility:visible; display:block; color:#0000FF; }

</style>

</head>

<body>

If you are using internet explorer there will be more here: 

<br><br>

<script language="javascript" type="text/javascript"> 
    if (document.documentMode) document.write("which ie mode: "+document.documentElement.className);
</script>

<br><br>

<div class="hide_element display_compatibility_mode">
   This is in compatibility mode. [this should show up in orange]
</div>

<div class="hide_element display_not_compatibility_mode">
   This is not in compatibility mode. [this should show up in blue]
</div>

</body>
</html>

CSS在兼容模式下仅适用于IE8（没有IE8没有IE7）？

5 个答案: