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

Question

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

6

我有一个嵌套的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>

标签有一个闭合标签，里面还有更多内容，已经正确渲染。

上述内容的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页面上。

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

请问有人能帮助解释一下吗？

提前感谢！

安迪

- CodeFirstAndy

你有检查两个类的属性是否相同吗？ - Krish

2个回答

0

尝试将此添加到标头

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

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

- m1k1o

实际上，更好的标签使用是 ie=edge，这将确保当 IE10 或 11 推出时，它始终以最标准的模式呈现。 - Erik Funkenbusch

我认为这个问题的重点是解决IE-9兼容视图的问题，而不是跳过兼容视图。 - Krish

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik Funkenbusch · Accepted Answer

Internet Explorer有一个兼容性“特性”，它总是以兼容模式呈现位于本地网络上的网站。您必须通过以下两种方式之一显式关闭此功能。

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

这个边缘标记告诉IE始终在其最标准的模式下呈现。

另一种方法（我更喜欢的）是在使用服务器端技术例如asp.net或php时添加http头信息（在asp.net中，此项在global.asax中处理，同时chrome=1可激活已安装的Chrome框架）。

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

编辑：

还有第三种方法，就是在“Internet选项”中的兼容性视图选项卡中禁用它。但这只会影响你自己的电脑。

另外，最好使用头部信息法（header method），而不是 meta 标签法（meta tag method）。因为当浏览器读取到元标记时，它已经处于其主要模式下了。元标记只影响文档呈现模式，而不影响浏览器的兼容性模式。这有一个微妙的差别，在某些情况下会产生影响。