Question

我对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">

Answer 1

终于抓住了这个问题。 IE无法在样式表中处理超过4096个选择器。因此它在达到4096个选择器的限制后忽略了所有的样式规则。

将CSS文件拆分为两个单独的文件后，问题就解决了。

Answer 2

验证IE未在兼容模式下运行。我之前遇到过类似的问题，导致IE9渲染就好像它是IE7一样。我关闭了兼容模式，所有问题都解决了！如果这是问题所在，您可以使用头部中的以下元标记强制IE在没有兼容性模式的情况下进行渲染（继续并将其置于脑中，看看它是否为您解决了问题）：

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

Answer 3

首先，您的doctype对HTML5无效

替换现有的doctype可以帮助

＆lt;！doctype html＆gt;
＆LT; html lang =“fr”＆gt; ＆LT; - ！如果你的文字是瑞典语 - >
，你的文字是法语“sv”

然后CSS看起来有效，但是没有一个被调用的css可以被应用，因为它不在你在这里的html摘录中。

Answer 4

.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

中的另一个规则来覆盖它

Answer 5

您是否尝试从CSS中删除.B2B？通过查看你的例子，这似乎是个问题。

所以不是这个

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

试试这个

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

Answer 6

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

错误第2行，第64列：没有属性“class”... =“http://www.w3.org/1999/xhtml”class =“js no-touch borderradius boxshadow text ...
<您已在文档中使用了上面提到的属性，但您使用的文档类型不支持该元素的该属性。此错误通常是由于“Strict”文档类型与使用的文档的错误使用造成的框架（例如，您必须使用“Transitional”文档类型来获取“目标”属性），或者使用供应商专有扩展，例如“marginheight”（这通常通过使用CSS来实现所需效果来修复）。如果您正在使用的文档类型不支持元素本身，也可能导致此错误，因为未定义的元素将不具有受支持的属性;在这种情况下，请参阅element-undefined错误消息以获取更多信息。

无论这个问题如何（尽管你一定要解决它），添加“overflow：hidden;”您的.B2B .info_cart声明应该使您的样式显示在开发者控制台中，在“trace”和“computed”下 -

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

让我知道这对你有何影响。这就是我到目前为止所做的一切。

Answer 7

请使用此代码

<!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>

IE 9忽略了CSS规则

7 个答案: