兼容模式下的 IE9 无法正确显示 CSS 样式答案

【问题标题】：IE9 in compatibility mode not displaying CSS styles correctly兼容模式下的 IE9 无法正确显示 CSS 样式
【发布时间】：2012-03-26 18:42:53
【问题描述】：

我有一个嵌套的 div（见下文），它有不同的 CSS 类来为容器提供背景颜色和文本格式

<div class="section">
    <div class="sectionTitle">
        <dx:ASPxLabel ID="lblSectionTitle" runat="server" Text='<%# Eval("SectionTitle") %>'></dx:ASPxLabel>
    </div>

    <div class="sectionTitle">
        <dx:ASPxLabel ID="lblSectionDesc" runat="server" Text='<%# Eval("SectionDescription") %>'></dx:ASPxLabel>
    </div>

部分 div 有一个结束标记，其中还有更多内容可以正确呈现。

上面的CSS是：

.section
{
    padding: 5px; 
    background-color: #ffffff; 
}

.sectionTitle
{
    font-size: 11px; 
    font-family: Arial; 
    font-weight: bold;
    color: #546fb2;
}

当我在 .section 中注释掉背景颜色时，正在应用 sectionTitle 的格式，但是当我将背景颜色放在那里时，它会覆盖 sectionTitle 的颜色。我尝试将 .section 的颜色设置为与 .sectionTitle 匹配，但这仍然不起作用。

在每个浏览器（IE9 不兼容、Firefox、Chrome）中都可以正常工作，我已经看了几个小时了，因为我无法发现问题，所以这有点令人沮丧。

内容位于使用 MasterPage 的 ASP.NET 页面上，该 MasterPage 具有以下文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

有人可以帮忙解释一下吗？

提前致谢

安迪

【问题讨论】：

你检查了两个具有相同属性的类吗？

标签： asp.net css internet-explorer

【解决方案1】：

Internet Explorer 具有兼容性“功能”，它始终以兼容模式呈现本地网络上的站点。您必须通过以下两种方式之一明确关闭此功能。

<meta http-equiv="x-ua-compatible" content="ie=edge" />

此边缘标记告诉 ie 始终以它支持的最标准模式进行渲染。

如果您使用像 asp.net 或 php 这样的服务器端技术，则使用另一种方法（我更喜欢），即添加一个 http 标头（在 asp.net 中，这在 global.asax 中，也是 chrome =1 启用 chromeframe（如果已安装）：

protected void Application_BeginRequest() 
{ 
    Response.Headers.Add("X-UA-Compatible", "IE=edge, Chrome=1"); 
}

编辑：

还有第三种方法，那就是在 Internet 选项的兼容性视图选项卡中禁用它。但是，这只会影响您的计算机。

此外，如果可能的话，最好不要使用标头方法，而不是元标记方法。当浏览器读取元标记时，它已经处于它的主要模式。 meta 标签只影响文档渲染模式，而不影响浏览器兼容模式。在某些情况下，存在细微差别会产生影响。

【讨论】：

谢谢！用你的知识救了我。
如果客户端实际使用的是旧浏览器会怎样？在这种情况下，标头有什么作用？
@James - 没什么，因为浏览器无法识别它......它只是忽略它。

【解决方案2】：

尝试将其添加到标题

 <meta http-equiv="x-ua-compatible" content="ie=emulateie9" />

在IE9上按F12，如果有文档模式Qirks，你必须通过meta标签来修复它。也许这是你的问题。

【讨论】：

其实ie=edge这个标签比较好用，这样可以保证IE10或者11出来的时候总是以最标准的模式渲染。
我认为问题指向解决 IE-9 兼容性视图中的问题，而不是跳过兼容性视图