在 IE 9 中转移到 IIS 7 后 CSS 无法正确显示
Posted
技术标签:
【中文标题】在 IE 9 中转移到 IIS 7 后 CSS 无法正确显示【英文标题】：CSS not displaying properly after transferred to IIS 7 in IE 9 【发布时间】：2011-09-07 03:33:05 【问题描述】：当通过 VS 2010 在开发服务器上运行时，所有 CSS 都会正确显示。我使用 IIS 7 发布到 win server 2008 r2，当我在 IE 9 中打开时，内联块不起作用，渐变不起作用，盒子阴影不起作用。它去除了大部分 CSS 格式，我在 Firefox 中加载了相同的页面，它看起来与在开发服务器下的 IE 9 中相同。下面的代码： CSS 文件：
body
#opsChartContainer
background: #FFFFFF;
margin: auto;
width: 600px;
padding-top: 15px;
font-family: helvetica, arial, sans-serif;
display: inline-table;
#oldestActiveCon
background: #FFFFFF;
margin: auto;
width: 300px;
padding-top: 15px;
font-family: helvetica, arial, sans-serif;
display: inline-table;
#incVolumeCon
background: #FFFFFF;
margin: auto;
width: 700px;
padding-top: 15px;
font-family: helvetica, arial, sans-serif;
display: inline-table;
#reqSLACon
background: #FFFFFF;
margin: auto;
width: 400px;
padding-top: 15px;
font-family: helvetica, arial, sans-serif;
display: inline-table;
h1
background: #e3e3e3;
background: -moz-linear-gradient(top, #fcfdfe, #8bb7e3);
background: -webkit-gradient(linear, left top, left bottom, from(#fcfdfe), to(#8bb7e3));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 3px 3px 3px #292929;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fcfdfe, endColorstr=#8bb7e3)";
color: #454545;
text-shadow: 0 1px 0 white;
font-size: small;
font-weight: bold;
h2
background: #dde3d5;
padding: 10px 20px;
margin-left: 5px;
margin-top: 10px;
position: relative;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 3px 3px 3px #b5baae;
color: #454545;
text-shadow: 0 1px 0 white;
font-size: small;
font-style: normal;
.mGrid
width: 100%;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse:collapse;
.mGrid td
padding: 2px;
.header
padding: 4px 2px;
color: #ffffff;
background: #4289c6 url('../grd_head.png') repeat-x top;
.alt
background: #FFFFFF url('../grd_alt.png') repeat-x top;
font-size: smaller;
font-family: Arial;
font-style: normal;
.rst
background: #FFFFFF url('../grd_firstt.png') repeat-x top;
font-size: smaller;
font-family: Arial;
font-style: normal;
ul#testy li
list-style-type: none;
display: inline-block;
vertical-align: top;
padding-left: 50px;
ASPX 前端：
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="test.test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="opsChartContainer"><h1>TEXT</h1><h2>FLASHFILE</h2></div>
<div id="oldestActiveCon"><h1>TEXT</h1>
<h2>
<asp:GridView ID="GridView1" runat="server" CellPadding="4"
ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="200px">
<AlternatingRowStyle CssClass="alt" />
<Columns>
<asp:BoundField DataField="Status" HeaderText="Status"
SortExpression="Status" />
<asp:BoundField DataField="Team" HeaderText="Team" SortExpression="Team" />
<asp:BoundField DataField="Time" HeaderText="Time" ReadOnly="True"
SortExpression="Time" />
<asp:TemplateField HeaderText="Request ID">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" NavigateUrl='<% # "link"+ Eval("Request") + "&"%>'><%#Eval("Request")%></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="header" />
<RowStyle CssClass="rst"></RowStyle>
</asp:GridView>
</h2>
</div>
<div id="incVolumeCon">
<h1>text</h1>
<h2>
flashfile
</h2>
</div>
<div id="reqSLACon">
<h1> text</h1>
<h2>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
DataSourceID="blahblah" CellPadding="4" ForeColor="#333333"
GridLines="None" CssClass="mGrid" AlternatingRowStyle-CssClass="alt" RowStyle-CssClass="rst" Width = "400">
<Columns>
<asp:BoundField DataField="text" HeaderText="text" ReadOnly="True"
SortExpression="text" />
<asp:BoundField DataField="Dueby Time" HeaderText="text" ReadOnly="True"
SortExpression="text" />
<asp:BoundField DataField="text" HeaderText="text"
ReadOnly="True" SortExpression="text" />
<asp:BoundField DataField="text" HeaderText="text"
ReadOnly="True" SortExpression="text" />
<asp:BoundField DataField="Expr1" HeaderText="text" ReadOnly="True"
SortExpression="Expr1" />
<asp:TemplateField HeaderText="Request ID" >
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" NavigateUrl='<%# "link"+ Eval("Request ID") + "&"%>'><%#Eval("Request ID")%></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
test
</h2>
</div>
有什么想法吗？是什么导致我在 IE 9 中通过开发服务器从 vs 2010 中查看它与我在 IE 9 中在生产服务器上查看它时出现差异？
【问题讨论】：
您的样式表中的 any CSS 规则是否适用？请在地址栏中运行javascript:alert(document.compatMode + '\n' + document.documentMode)，告诉我们结果如何。
您的 IE 9 是否在兼容模式下运行？ （当您查看生产服务器时）
不，不是，我也在 ie 8 和 7 中进行了测试，结果相同。部分 CSS 适用，但不是全部。
如何在地址栏中运行 javascript:alert(document.compatMode + '\n' + document.documentMode)？
【参考方案1】：
我们在对齐和边界上遇到了问题，部署后它正在改变，
将这个标签放在母版页中 DOCTYPE 之后，所有的东西看起来都和本地一样。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
【讨论】：
【参考方案2】：您的页面正在以“IE 9 标准”以外的文档模式运行。
按 F12 以调出开发者工具，看看它到底是什么。
请参阅此处了解为什么会发生这种情况的说明：http://hsivonen.iki.fi/doctype/#ie8modes
否则，您可以通过将其添加到 <head> 的顶部来修复它：
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
这将强制 IE 使用其最新的渲染引擎。
这也可以在 IIS 服务器中通过 HTTP 响应标头中的设置来完成。 在名称字段中输入“X-UA-Compatible”，在值字段中输入“IE=Edge” 在编辑自定义 HTTP 响应标头中，如下图所示。
【讨论】：
谢谢！！这是文档模式 没问题。请注意，您不能只更改文档模式 - 这只会对您有用。您需要添加meta 标签。这将为其他所有人设置正确的文档模式。另外，如果对您有用，请accept my answer。
+1 是使用 X-UA-Compatible 元标记的最佳实践方式，与建议将其设置为 IE8 的其他答案形成对比。
为我节省了大量时间和白发。谢谢！
如何在 F12 中检查页面是否以“IE 9 标准”以外的文档模式运行？我在哪里可以找到这些信息？【参考方案3】：
我在几个网站上遇到了同样的问题。它在除 IE9 之外的所有浏览器（我测试过的）中都正确呈现。我通过在 HEADER 中插入 <meta content="IE=8" http-equiv="X-UA-Compatible" /> 来解决它。
但在我的情况下，它在本地或远程的任何地方都不起作用，所以如果你在本地渲染它可能是别的东西，但值得一试。
希望对您有所帮助....
【讨论】：
绝对不会——这会迫使 IE9 进入 IE8 兼容模式，这基本上意味着放弃所有新功能。您应该确保您知道它在什么模式下运行，并确保它在可用的最佳模式下运行（即 IE9 标准模式），但是任何时候您考虑将站点设置为默认为向后兼容模式时，您会最好修复代码中使您想要这样做的问题，因为它们可能意味着您也在其他浏览器中中断。 @Spudley - cufon.shoqolate.com/generate 中的一个错误在 IE9 中出现问题，这只是一个快速修复。【参考方案4】：您是否手动转到服务器上 CSS 文件的 URL 并查看它显示的内容？我预计这将是 500 Internal Server Error 或类似响应，而不是实际的 CSS 代码。
【讨论】：
以上是关于在 IE 9 中转移到 IIS 7 后 CSS 无法正确显示的主要内容，如果未能解决你的问题，请参考以下文章
text IE CSS Hacks - IE6,7,8,9,10,11，Edge
text IE CSS Hacks All - IE6,7,8,9,10,11，Edge
text IE CSS Hacks All - IE6,7,8,9,10,11，Edge