IE9和Blogger的CSS分層問題

我不確定這是否與Blogger模板存在問題，或者我只是忘記了一個簡單的CSS屬性。IE9和Blogger的CSS分層問題

我正在爲朋友製作模板，並試圖在menubar div上方右上角顯示徽標，並且它在Firefox和Chrome中運行得很好，但它在IE9中的div後面呈現。

這裏是鏈接到演示： Demo blog

從本質上講，創建一個絕對定位的div我做了什麼，有一個內部的圖像：

<div id="logo2"> 
    <a href=""> 
    <img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png"> 
    </a> 
</div>

和相關的CSS：

#logo2 { 
    position:absolute; 
    top: -25px; 
    right: -50px; 
    z-index: 999; 
}

我以爲絕對位置加上高Z指數可以解決任何IE問題處理Z指數，但我錯了。

我也嘗試在菜單欄div中添加一個位置（相對）和z-index（1），但都無濟於事。

每@Dubious'的建議，我說沒有成功以下（圖像仍裁剪）：

.tabs-outer, .tabs-inner { 
    <!-- [if ie 9]> 
     z-index: -1; 
    <![endif]> 
    position: relative; 
}

來源

2012-08-08 espais

老答案「嘗試添加-1的z-index的，而不是1你的菜單欄格」

編輯：

好了，做了一些摸索之後，在IE9開發工具中，我注意到你的源代碼告訴IE在Document Mode：IE7 Standards中渲染頁面。正如你所看到的，在打開開發工具（並確保開發工具框架處於活動狀態）後，您可以按alt + 9渲染css，因爲它應該在IE9中呈現。發生這種情況後，內容將顯示爲與任何當前瀏覽器中的內容一樣。

那麼爲什麼頁面加載IE7文檔標準呢？那麼你需要爲每個頁面使用正確的符合標準的！DOCTYPE指令。要做到這一點，請閱讀this page並確保您的html文件遵循第一個示例。我應該給你的IE條件註釋一個更好的例子

條件註釋

，所以我會去深入多了幾分在這裏。 IE條件註釋只能在html中定義，因爲它使用<!-->這是特定於html的代碼。因此，爲了添加ie7/ie9/ie特定的css，您需要在註釋字段中添加一個新的樣式表，該樣式表具有特定的代碼。進一步閱讀here。還請注意，由於您遇到此問題是因爲頁面呈現IE7怪異模式css，因此您可能需要使用ie7註釋而不是ie9。

我真的希望這能解決你的問題，祝你好運！

來源

2012-08-08 01:18:12 JonahAaron

這樣做實際上隱藏了菜單... – espais 2012-08-08 01:20:04

我明白了......我沒有想到在Chrome中檢查它，實際上是在奇怪地修復IE中的問題。 – JonahAaron 2012-08-08 01:33:22

您可以嘗試添加IE9條件註釋（http://stackoverflow.com/a/7364911/1073053）以僅爲IE9添加-1的z索引。 – JonahAaron 2012-08-08 01:46:05

IE9和Blogger的CSS分層問題

回答

相關問題