CSS не отображается должным образом после перехода на IIS 7 в IE 9

Question

При работе на dev-сервере через VS 2010 все CSS отображаются правильно. Я публикую на win Server 2008 r2 с IIS 7, и когда я открываю в IE 9 встроенный блок не работает, градиенты не работают, а box-shadow не работает. Он удаляет большую часть CSS-форматирования, я загружаю ту же страницу в Firefox, и она выглядит так же, как в IE 9 на сервере dev. Код ниже: Файл 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 через сервер dev от версии 2010 и просмотром в IE 9 на производственном сервере?

Answer 1

Ваша страница работает в режиме документа, отличном от "Стандарты IE 9".

Нажмите F12, чтобы открыть Инструменты разработчика, чтобы увидеть, какой это на самом деле.

См. Здесь инструкции по выработке почему это происходит: http://hsivonen.iki.fi/doctype/#ie8modes

В противном случае вы можете исправить это, добавив это в верхнюю часть вашего <head>:

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

Это заставит IE использовать самый современный механизм рендеринга.

Это можно сделать на сервере IIS также с помощью настроек в заголовке ответа HTTP. В поле «Имя» укажите «X-UA-совместимый», а в поле «Значение» - «IE = Edge». в редактировать пользовательский заголовок ответа HTTP, как показано на рисунке ниже.

Answer 2

У меня была такая же проблема на нескольких сайтах.Он корректно отображается во всех браузерах (которые я тестировал), кроме IE9.Я решил это, вставив <meta content="IE=8" http-equiv="X-UA-Compatible" /> в заголовок.

Но в моей ситуации это не сработало нигде локально или удаленно, поэтому, если вы выполняете локальный рендеринг, это может быть что-то другое, но стоит попробовать.

Надеюсь, это поможет ....

Answer 3

У нас возникла проблема с выравниванием и границей, она менялась после развертывания,

После размещения этого тега на главной странице сразу после DOCTYPE все выглядит так же, как на локальном.

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

Answer 4

Вы вручную переходили по URL-адресу CSS-файла на сервере и видели, что он отображает? Я ожидаю, что это будет Внутренняя ошибка сервера 500 или аналогичный ответ вместо фактического кода CSS.