CSS样式在IE中无法正常显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS样式在IE中无法正常显示相关的知识,希望对你有一定的参考价值。

这是我写的一段代码,在360浏览器上测试有效,但在IE浏览器上就没有效果,请问这是什么原因,怎么才能在IE浏览器上正常显示?

a:link
color: #333333;

a:visited
color: #333333;

a:hover
color: #FFA50F;
text-decoration: underline;

楼上说的对,文档声明会影响样式,还有a标签的href里有没有东西也会影响,即使放个#也要放,不要空着<a href="#">链接</a> 参考技术A 看一下是否是没加文档类型<!DOCTYPE html>

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

【中文标题】兼容模式下的 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 兼容性视图中的问题,而不是跳过兼容性视图

以上是关于CSS样式在IE中无法正常显示的主要内容,如果未能解决你的问题,请参考以下文章

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

兼容模式下ie9和ie10显示样式在不兼容模式下为啥不加载css样式?

本地测试网页无法加载css链接文件怎么办

web样式无法正常显示

servlet重定向到jsp后样式无法正常显示

CSS 样式未在 IE 7 上显示 [关闭]