IE8在不同Web服務器上的不同佈局

昨晚，我在IE8中遇到了一個奇怪的行爲，因爲我看到兩個明顯不同的頁面佈局被託管在不同的服務器上。在我的本地網絡服務器上，標題標記與其左側對齊的徽標以及右對齊和堆疊的實用工具鏈接看起來一樣，所有這些都顯示在居中頁面上。在分段Web服務器和生產Web服務器上，標題標記在頁面上完全不可見，因爲它位於比頁面高152px的位置。IE8在不同Web服務器上的不同佈局

我明白下面的「.header .hog」選擇器CSS代碼是黑客。這是對需要立即部署的更改的快速修復。與其分析如何改進此代碼，我更感興趣的是瞭解IE8中這些表示差異的原因。我有幾個問題是：

標記可以有不同的編碼？如果是這樣，確定這種可能性的最好方法是什麼？並且，IIS7中的哪些設置（如果有的話）負責編碼輸出？
權限可能是導致此問題的原因嗎？
在IIS7中是否有一個功能確定標記是否被嚴格解釋？
Vista和IE8的佈局引擎在Vista上有區別嗎？

我的標記代碼如下：

<body> 
    <div class="content"> 
     <div class="header"> 
      <h1 id="logo"><img src="/img/logo.jpg" /></h1> 
      <div class="hog"> 
       <a class="see">Text</a> 
       <div class="more"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
       </div> 
      </div> 
      <div class="utility-links"> 
       <a>link1</a>| 
       <a>link2</a>| 
       <a>link3</a>| 
       <a>link4</a> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </div> 
</body>

我的CSS代碼如下：

* { 
    border:none; 
    line-height:normal; 
    margin:0; 
    outline:none; 
    padding:0; 
    text-decoration:none; 
} 

body{ 
    background:#70133F; 
    color:#000000; 
    font-family:Arial, Verdana, Helvetica, sans-serif; 
    font-size:12px; 
    margin:0 auto; 
} 

.clear{ 
    clear:both; 
    font-size:0; 
    height:0; 
    line-height:0; 
    margin:0; 
    padding:0; 
} 

.content{ 
    background:#FFFFFF; 
    margin:0 auto; 
    width:970px; 
} 

.header{ 
    height:160px; 
} 

.header #logo{ 
    float:left; 
    font-size:0; 
    height:124px; 
    margin:25px 0 0 18px; 
    width:204px; 
} 

.header .util-links { 
    color:#E83F00; 
    font:bold 12px; 
    float:right; 
    margin:135px 15px 0 0; 
    text-align:right; 
    text-transform:uppercase; 
} 

.header .util-links a { 
    padding:0 10px; 
} 

.header .hog { 
    height:3px; 
    position:relative; 
    margin-top:-152px; 
    text-align:right; 
    width:945px; 
} 

.header .hog a.see-holiday { 
    color:#E83F00; 
    font:bold 12px; 
    text-transform:uppercase; 
    height:40px; 
    width:254px; 
} 

.header .hog .guidelines { 
    display:none; 
    margin-left:524px; 
    text-align:left; 
    width:428px; 
}

感謝您的幫助。感恩節快樂，大家好！
約翰

來源

2009-11-24 phreeskier

是否有關於Vista和XP上IE8 IE8的佈局引擎之間的差異？

如果我理解正確，看起來您不僅擁有2臺服務器，而且您還從2臺不同的計算機（一臺運行XP和另一臺Vista）訪問該站點。在兩臺計算機上打開IE開發人員工具，並觀察瀏覽器模式和文檔模式。也許其中一個瀏覽器已被永久設置爲IE7兼容模式？或者其中一臺服務器發送<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />標籤強制進行兼容模式？

XP和Vista之間的IE瀏覽器略有不同，因爲IE使用操作系統控件來呈現某些控件，如按鈕，文本框，選擇框和滾動條。但是，由此造成的佈局差異不應該太大。

爲了找到不同的標題，你可以安裝一個工具，如fiddler或httpwatch，並在兩臺機器上檢查它們。

來源

2009-11-24 20:01:22

感謝您的快速回復和好主意。此問題與在不同Web服務器上託管的頁面比在不同操作系統上顯示的頁面更相關。這兩個服務器都沒有在網頁上添加標籤，或者向該網頁添加了「X-UA-Compatible：IE = EmulateIE7」標籤HTTP標頭。此外，瀏覽器未在IE7兼容模式下永久設置。而不是模擬IE8中的IE7標記，我想修復這種根本原因的演示差異。謝謝你的想法。 – phreeskier 2009-11-24 20:53:41

開發工具爲文檔模式和瀏覽器模式顯示了什麼？是在主機名（Intranet區域）中使用沒有點的URL的頁面之一？這些默認放在CompatMode中。 – EricLaw 2009-11-24 23:13:40

我剛剛得知，IE瀏覽器將所有可公開訪問的互聯網網站在IE 8瀏覽器模式和所有Intranet站點到IE 8瀏覽器的兼容模式，優雅地展示專爲較舊的網絡瀏覽器以及在IE8的內容投放。這就解釋了爲什麼本地服務頁面看起來正確並且瀏覽器模式設置爲IE8兼容模式。再次感謝你的幫助。 – phreeskier 2009-11-24 23:18:18

IE8在不同Web服務器上的不同佈局

回答

相關問題