0

我的 .net 应用程序出现了一些奇怪的行为。当我在 IE8 上的 Visual Studio 中运行它时，它看起来很好：

在此处输入图像描述

但是当我将应用程序部署到我的服务器并通过 URL 访问时，它似乎失去了余量：

在此处输入图像描述

同一个应用，运行在同一个浏览器的同一个版本，为什么会出现这种差异？

这是我的 CSS（徽标在“徽标”类中）：

body {
    font-family: Helvetica, sans-serif;
    background-color: #aaa;
    margin: 0px;
    line-height: 1.5rem;
}

header, footer, nav, section {
    display: block;
}


/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}


img,
embed,
object,
video {
    max-width: 100%;
}

.header {
    background-color: #ffffff;
    color: #98BF79;
    overflow:auto;
}

.logo {
    float: left;
    height: 60px;
    width: 60px;
    margin: 1.625em;
}

    .logo img {
        max-width: 100%;
    }

.nav {
    padding-left: 1.625em;
    padding-right: 1.625em;
    float: right;
    margin-top: 3.5625em;
}

    .nav ul {
        list-style: none;
        margin-bottom: 1.625em;
    }

    .nav li {
        margin-right: 1.6em;
        float: left;
    }

    .nav a {
        text-decoration: none;
        color: #98BF79;
    }

        .nav a:link {
            color: #98BF79;
        }

        .nav a:hover {
            color: #f90;
        }

        .nav a:focus {
            color: #f90;
        }

.container {
    max-width: 50em;
    padding-left: 1.625em;
    padding-right: 1.625em;
    color: #fff;
}

    .container a {
        color: #fff;
        text-decoration: none;
    }

        .container a:hover {
            color: #f90;
        }

        .container a:focus {
            color: #f90;
        }

    .container h1 {
        font-size: 3rem;
        line-height: 2.6rem;
        margin-bottom: 1.625rem;
    }
    .container .footnote {
        font-size: .7rem;
        font-style:normal;
    }


.input {
    max-width: 100%;
    height:20em;
    padding-top: 0.8125em;
    padding-right: 0px;
    padding-bottom: 0.8125em;
    padding-left: 0.325em;
}
.table {
    margin:0px;padding:0px;
    width:25em;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #ffffff;

}.table table{
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}



.table td{
    vertical-align:middle;

    background-color:#aaa;

    border:1px solid #ffffff;
    border-width:0px 0px 0px 0px;
    text-align:center;
    padding:9px;
    font-size:14px;
    font-family:Helvetica;
    font-weight:normal;
    color:#ffffff;
}


@media only screen and (max-width: 40em) {

    .nav {
        clear: left;
        float: left;
        margin-top: 0;
    }

        .nav ul {
            padding-left: 0px;
        }

        .nav li {
            float: none;
        }
}
4

1 回答 1

2

我能想到的最可能的原因是，当您使用 localhost 打开站点时，您的站点在 Intranet 模式下运行，并且当您将其部署到 Web 服务器时，Intranet 模式已关闭，因此您的样式被破坏了。

测试这一点的一种方法是将您的站点放在 Intranet 站点上，为此转到工具-> Internet 选项并选择安全性-> Intranet，然后单击站点和高级选项，然后将站点的 url 添加到列表中。这应该正确呈现部署的站点。

原因是 Intranet 模式默认启用兼容模式，并且此模式呈现 Internet Explorer 7 的页面，也可能只是为 localhost 启用了兼容模式，但未为部署的网站启用。

如果站点在此之后正确呈现，那么您可能需要检查您的样式表，以便它在没有 Intranet 模式或兼容模式的情况下正确呈现。

编辑：

很好奇你的问题是相反的，但为了避免兼容模式，请检查这个答案：Force IE compatible mode off using tags

于 2013-08-23T17:54:27.787 回答