Html .net:应用程序在服务器上的IE8中丢失样式

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

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

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

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

---

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

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

这是因为默认情况下Intranet模式启用了兼容模式，并且该模式从Internet Explorer 7开始呈现页面，也可能只是因为本地主机启用了兼容模式，而不是部署的网站启用了兼容模式

如果在此之后站点正确呈现，则您可能希望查看样式表，以便在不使用Intranet模式或兼容模式的情况下正确呈现

编辑：

---

奇怪的是，你的问题正好相反，但为了避免兼容模式，请检查以下答案：

在每个版本的网站中，点击F12。开发工具显示什么浏览器模式？您可能遇到了一个问题，即站点在一个上下文的兼容性视图中呈现，而不是在另一个上下文中呈现。是的，它看起来像是在断开的实例中以兼容模式运行。我可以对我的CSS做些什么使它在这两种情况下都能工作吗？在这两种情况下，它都已经在intranet模式下运行，所以这不是它。实际上，它看起来像是在断开的实例中以兼容模式运行。我能对我的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;
        }
}