在 IE 9 中传输到 IIS 7 后,CSS 无法正确显示

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6216074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:40:45  来源:igfitidea点击:

CSS not displaying properly after transferred to IIS 7 in IE 9

asp.netcssinternet-explorer

提问by eBot

When running on dev server through VS 2010 all CSS displays properly. I publish to win server 2008 r2 with IIS 7, and when I open in IE 9 the inline-block doesnt work, the gradients dont work, and the box-shadow doesnt work. It strips out most of the CSS formatting, I load the same page in firefox and it looks the same as it does in IE 9 under the dev server. Code below: CSS file:

通过 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 front end:

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>

ANY ideas? What is causing the disparity between when I view it in IE 9 through dev server from vs 2010 and when I view it in IE 9 on production server?

有任何想法吗?是什么导致了我在 IE 9 中通过与 2010 年的开发服务器在 IE 9 中查看它时在生产服务器上在 IE 9 中查看它之间的差异?

回答by thirtydot

Your page is running with a Document Mode other than "IE 9 Standards".

您的页面正在以“IE 9 标准”以外的文档模式运行。

Hit F12 to bring up the Developer Tools to see which it actually is.

按 F12 调出开发人员工具以查看它实际上是哪个。

See here for instructions to work out whythis is happening: http://hsivonen.iki.fi/doctype/#ie8modes

看到这里的工作说明了为什么这种情况正在发生:http://hsivonen.iki.fi/doctype/#ie8modes

Otherwise, you can fix it by adding this to the top of your <head>:

否则,您可以通过将其添加到您的顶部来修复它<head>

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

This will force IE to use its most up-to-date rendering engine.

这将强制 IE 使用其最新的渲染引擎。

This can be done in IIS server also by settings in HTTP Response Header.IN the Name field put "X-UA-Compatible" and in the Value field put "IE=Edge" in EDIT Custom HTTP Response Header as below image.

这也可以通过 HTTP 响应头中的设置在 IIS 服务器中完成。在名称字段中输入“X-UA-Compatible”,在值字段中将“IE=Edge”放入 EDIT Custom HTTP Response Header 中,如下图所示。

enter image description here

在此处输入图片说明

回答by Johann du Toit

I had this same problem on a couple of websites. It rendered correctly in all browsers (That I tested) except IE9. I solved it by inserting <meta content="IE=8" http-equiv="X-UA-Compatible" />in the HEADER.

我在几个网站上遇到了同样的问题。它在除 IE9 之外的所有浏览器(我测试过的)中都能正确呈现。我通过插入<meta content="IE=8" http-equiv="X-UA-Compatible" />HEADER来解决它。

But with me situation it did not work anywhere locally or remotely, so if your rendering locally it could be something else but it's worth a try.

但是在我的情况下,它在本地或远程的任何地方都不起作用,所以如果您在本地渲染它可能是其他东西,但值得一试。

Hope that helps....

希望有所帮助....

回答by Dark Falcon

Did you manually go to the URL of the CSS file on the server and see what it displays? I expect it will be a 500 Internal Server Error or similar response instead of actual CSS code.

您是否手动转到服务器上 CSS 文件的 URL 并查看它显示的内容?我预计它将是 500 Internal Server Error 或类似的响应,而不是实际的 CSS 代码。

回答by Devendra Patel

We had issue on alignment and border, it were getting changed after deployement,

我们在对齐和边界上有问题,部署后正在改变,

After putting this tag in master page just after the DOCTYPE, all things are looking same as they look on local.

将这个标签放在母版页中 DOCTYPE 之后,所有的东西看起来都和在本地看到的一样。

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