兼容模式下的 IE9 无法正确显示 CSS 样式
Posted
技术标签:
【中文标题】兼容模式下的 IE9 无法正确显示 CSS 样式【英文标题】：IE9 in compatibility mode not displaying CSS styles correctly 【发布时间】：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">
有人可以帮忙解释一下吗？
提前致谢
安迪
【问题讨论】：
你检查了两个具有相同属性的类吗？ 【参考方案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 兼容性视图中的问题，而不是跳过兼容性视图以上是关于兼容模式下的 IE9 无法正确显示 CSS 样式的主要内容，如果未能解决你的问题，请参考以下文章