.net：應用程序在IE8服務器上丟失樣式

Question

我的.net應用程序出現一些奇怪的行爲。當我從Visual Studio在IE8中運行它，它看起來不錯：

但是當我部署應用程序通過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; 
     } 
} 

Answer 1

最可能的原因，我能想到的是，當您在使用開啓您的網站在聯網模式下運行localhost，並且當您將其部署到Web服務器時，Intranet模式已關閉，因此您的樣式已損壞。

測試此方法的一種方法是將您的站點放在Intranet站點上，爲此轉到Tools-> Internet Options並選擇Security-> Intranet，然後單擊Sites和Advanced Options，然後將該站點的URL添加到名單。這應該正確呈現已部署的網站。

原因是Intranet模式默認情況下啓用兼容模式，並且此模式從Internet Explorer 7開始渲染頁面，也可能只是爲本地主機啓用兼容模式，而不是爲已部署的網站啓用兼容模式。

如果網站在此之後正確渲染，則可能需要查看樣式表，以便在沒有Intranet模式或兼容模式的情況下正確渲染。

編輯：

好奇，你的問題是周圍的其他方式，但避免了兼容性模式，檢查這個答案：Force IE compatibility mode off using tags