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

anD*_*666 6 css asp.net internet-explorer

我有一个嵌套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>
Run Code Online (Sandbox Code Playgroud)

div部分有一个结束标记,其中有更多内容正确呈现.

上面的CSS是:

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

.sectionTitle
{
    font-size: 11px; 
    font-family: Arial; 
    font-weight: bold;
    color: #546fb2;
}
Run Code Online (Sandbox Code Playgroud)

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

在每个浏览器(IE9不兼容,Firefox,Chrome)它工作正常,我已经看了几个小时现在这有点令人沮丧,因为我无法发现问题.

内容位于ASP.NET页面上,该页面使用具有doctype的MasterPage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Run Code Online (Sandbox Code Playgroud)

请问有人能帮忙解决这个问题吗?

提前致谢

安迪

Eri*_*sch 13

Internet Explorer具有兼容性"功能",它始终以兼容模式呈现本地网络上的站点.你必须以两种方式之一明确地关闭它.

<meta http-equiv="x-ua-compatible" content="ie=edge" /> 
Run Code Online (Sandbox Code Playgroud)

这个边缘标记告诉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"); 
} 
Run Code Online (Sandbox Code Playgroud)

编辑:

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

此外,如果可能的话,最好使用头方法,而不是使用元标记方法.当浏览器读取元标记时,它已经处于主模式.元标记仅影响文档呈现模式,而不影响浏览器兼容模式.在某些情况下,存在微妙的差异,可能会产生影响.