0

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

我的 CSS 很简单

h1 {
   font-size:14px;
}

但这必须 font-size 只能在 IE8 上工作（兼容模式）

注意：我知道如何编写一个条件语句来识别 IE8……但我不知道如何为 IE8 兼容模式执行此操作。

4

5 回答 5

2

IE8 的 CSS hack，如下所示：

h1{font-size:14px\0;}
于 2012-10-26T11:54:30.370 回答
1

不幸的是，没有办法仅适用于 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 中的问题兼容模式的 hack。

于 2012-10-26T13:13:08.083 回答
0

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

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

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

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

这仅适用于 IE8。

于 2012-10-26T09:33:22.350 回答
0

使用 css 破解：

     body{
         color:red;           /*every browser*/
         color:blue\9;        /*IE8 or below*/
     }
于 2013-12-05T14:55:49.960 回答
0

兼容模式除非有修改的 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>
于 2014-06-14T07:07:37.783 回答