IE 9 忽略 CSS 规则答案

【问题标题】：IE 9 ignoring CSS rulesIE 9 忽略 CSS 规则
【发布时间】：2014-02-10 23:41:29
【问题描述】：

IE9 有一个奇怪的问题，它自己忽略了某些 CSS 规则。甚至 IE8 也能正确加载它。 IE 10 和所有更好的浏览器（如 FF 和 Chrome）也是如此。

css 正在加载“text/css”MIME。

例如，

IE9 未应用这些规则。我在开发人员工具栏 CSS 选项卡中找不到这些规则。

.B2B .info_cart { display: block; clear: both !important; }
.B2B .info_cart .priceDetail { font: 14px/22px Arial,Helvetica,sans-serif; padding-left: 3px; }
.B2B .info_cart .priceInfo { bottom: 2px; font-size: 10px; line-height: 24px; margin: 0 0 0 2px; overflow: hidden; padding: 0; position: absolute; word-wrap: break-word; }
.B2B .info_cart .info_vat { font-size: 10px; float: right; margin-top: 7px; }

相关的HTML：

<div class="info_cart clearfix">
    <span class="spanBasketInfo"></span>
    <span class="cartValue"></span>
    <span class="cartShippingDetails"></span>
    <span class="info_vat">
        <span class="exc">exc. VAT</span>
        <a href="#">(change)</a>
    </span>
</div>

可能出了什么问题？

更新这是我正在使用的 Doctype，如果有帮助的话。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml" class=" js no-touch borderradius boxshadow textshadow opacity cssgradients csstransitions">

【问题讨论】：

JSFiddle 请..哦，哪些规则被忽略了？
如何包含您的 css 文件？
我已经提到了问题中的规则
您的规则意味着info_cart div 的父级是.B2B，但这不会显示在您的HTML 中。我们需要一个实际的 JSFiddle 示例来自己测试。
你认为 CSS 是正确的？嗯，这是否意味着您实际上还没有验证它？

标签： html css internet-explorer internet-explorer-9

【解决方案1】：

终于解决了问题。 IE 不能在样式表中处理超过 4096 个选择器。因此，在达到 4096 个选择器的限制后，它会忽略所有样式规则。

将 CSS 文件拆分为两个单独的文件后，问题已修复。

【讨论】：

【解决方案2】：

请使用此代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--[if lt IE 7]> <html class="no-js lt-ie10  lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml" class=" js no-touch borderradius boxshadow textshadow opacity cssgradients csstransitions"> <!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- end: Mobile Specific -->

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

【讨论】：

【解决方案3】：

这里的主要问题是您的 doctype 声明不支持在 HTML 标记上使用类名称。我用适当的头部、身体等标签充实了您提供的代码，并通过了 W3C 验证器。返回信息：

错误第 2 行，第 64 列：没有属性“class”...="http://www.w3.org/1999/xhtml" class="js no-touch borderradius boxshadow text...

您在文档中使用了上述属性，但您使用的文档类型不支持该元素的该属性。此错误通常是由于使用框架的文档错误使用“严格”文档类型（例如，您必须使用“Transitional”文档类型来获取“target”属性），或使用供应商专有扩展，例如“marginheight”（通常通过使用 CSS 来解决此问题，以实现所需的效果）。
如果您使用的文档类型不支持元素本身，也可能会导致此错误，因为未定义的元素将没有受支持的属性；在这种情况下，请参阅 element-undefined 错误消息以获取更多信息。

不管这个问题（尽管你绝对应该解决它），添加“溢出：隐藏；”您对 .B2B .info_cart 的声明应该会导致您的样式显示在开发者控制台中的“跟踪”和“计算”下 --

.B2B .info_cart { display: block; clear: both !important; overflow: hidden; }

让我知道这对你有什么影响。到目前为止，我能做的就是你提供的一切。

【讨论】：

【解决方案4】：

您是否尝试过从 CSS 中删除 .B2B？通过查看您的示例，这似乎是问题所在..

所以不是这个

.B2B .info_cart { display: block; clear: both !important; }

试试这个

.info_cart { display: block; clear: both !important; }

【讨论】：

【解决方案5】：

确认 IE 未在兼容模式下运行。我曾经遇到过类似的问题，导致 IE9 像 IE7 一样呈现。我关闭了兼容模式，我的所有问题都解决了！如果这是问题所在，您可以强制 IE 在不兼容模式的情况下使用您的头中的以下元标记进行渲染（继续将其放在您的头中，看看它是否为您解决了问题）：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

【讨论】：

这个答案解决了很多问题，而不仅仅是列出的一个。在调试 IE 时要记住这一点非常重要。
这段代码很神奇，刚刚解决了我的电子邮件设计中的许多 IE 问题。

【解决方案6】：

.B2B .info_cart .priceDetail { font: 14px/22px Arial,Helvetica,sans-serif; padding-left: 3px; }
.B2B .info_cart .priceInfo { bottom: 2px; font-size: 10px; line-height: 24px; margin: 0 0 0 2px; overflow: hidden; padding: 0; position: absolute; word-wrap: break-word; }

此规则没有 HTML。我认为这是因为它没有显示。

.B2B .info_cart .info_vat { font-size: 10px; float: right; margin-top: 7px; }

在这种情况下，您可能会用 exc 类中的另一个规则覆盖它

【讨论】：

【解决方案7】：

首先你的文档类型对 HTML5 无效

用这个替换您现有的文档类型可能会有所帮助

那么 CSS 看起来是有效的，但是调用的 css 都不能被应用，因为它不在你这里的 html 的摘录中。

【讨论】：

XHTML 1.1 仍然是有效的文档类型。他可能有他的理由（例如旧网站）保持原样。