asp.net - 兼容模式下的 IE9 无法正确显示 CSS 样式

标签 asp.net css 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>

部分 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">

有人能帮忙解释一下吗?

提前致谢

安迪

最佳答案

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

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

这个边缘标记告诉 ie 总是在它支持的最标准模式下呈现。

另一种方法(我更喜欢)如果你使用像 asp.net 或 php 这样的服务器端技术,那就是添加一个 http header (在 asp.net 中,这是在 global.asax 中,也是 chrome =1 启用 chromeframe(如果已安装):

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

编辑:

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

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

关于asp.net - 兼容模式下的 IE9 无法正确显示 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9631954/

相关文章:

asp.net - 如何将初始 "select"值添加到 DropDownList

javascript - fullPage.js 垂直 slider 导航点的对齐

html - 填充 div 的响应式 iframe

internet-explorer - 使用不同浏览器在 Play Framework 中上传文件

c# - 通用类型的 ASP.NET MVC 显示模板

c# - 检查每个页面的权限

asp.net - 单点登录 SignOut 问题 : FormsAuthentication. SignOut() 不起作用

javascript - 在 iMacros 中重新加载页面后,如何定位名称每次都在变化的表单输入字段?

javascript - 表单提交后从下一页删除浏览器工具栏

css - &lt;!--[if IE]> 条件注释在 Facelets 中呈现为 HTML 转义