Question

我使用MVC3创建了一个简单的应用程序，该网站基于默认模板。

当我构建网站并在本地运行时如果显示正确（使用IE9和Chrome），但当我将其部署到我们的服务器（Windows Server 2003）时，从我的机器访问时页面呈现不正确。

这是奇怪的一点......当我从服务器上的浏览器（IE8）查看网站时，它再次正确呈现。

似乎导致问题的CSS文件部分是......

header, #header 
{
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
    height: 135px;
}

header h1, #header h1 
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
    text-shadow: 1px 1px 2px #111;
}

#main 
{
    padding: 30px 30px 15px 30px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    background-image:  url(themes/base/images/ss_bg.gif);
    background-repeat: repeat;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}

footer, 
#footer 
{
    background-image:  url(themes/base/images/2bg.gif);
    background-repeat: repeat;

    font-family: Courier;
    font-size: .9em;
    font-weight: normal; 
    font-style: normal; 
    font-variant: normal; 
    color: Gray;

    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

以下是一些屏幕截图：

IE 9中的错误呈现 Incorrect Rendering

在IE 8上本地正确呈现 Correct Rendering

Answer 1

按F12打开开发人员工具，该工具应显示IE在站点的两个实例之间没有使用相同的“浏览器模式”/“文档模式”。

IE默认使用不同的模式，具体取决于页面的服务位置，只是为了让你感到高兴。

将此问题添加到<head>应解决问题：

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

使用IE9使用MVC3的布局不一致

1 个答案: