Asp.net

在 IE 9 中轉移到 IIS 7 後 CSS 無法正確顯示

  • October 19, 2014

通過 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>

有任何想法嗎?當我通過 vs 2010 的開發伺服器在 IE 9 中查看它與我在生產伺服器上的 IE 9 中查看它時,是什麼導致了差異?

您的頁面以“IE 9 標準”以外的文件模式執行。

按 F12 調出開發者工具,看看它到底是什麼。

請參閱此處了解為什麼會發生這種情況的說明:http: //hsivonen.iki.fi/doctype/#ie8modes

否則,您可以通過將其添加到您的頂部來修復它<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

這將迫使 IE 使用其最新的渲染引擎。

這也可以通過 HTTP 響應標頭中的設置在 IIS 伺服器中完成。 在名稱欄位中輸入“X-UA-Compatible”,並在值欄位中將“IE=Edge”放入編輯自定義 HTTP 響應標頭中,如下圖所示。

在此處輸入圖像描述

引用自:https://stackoverflow.com/questions/6216074