的z-index不FF3正常工作，在IE和鉻

讓我的網站設計上的IE瀏覽器的工作，但不是FF所以我期待問題的作品。但經過一番調查後，我已將其縮小到這個簡單的測試案例。的z-index不FF3正常工作，在IE和鉻

<head> 
<meta http-equiv="Content-Language" content="en-gb" /> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> 
<title>Test</title> 
</head> 

<body bgcolor="#ff0000" style="margin:0px"> 

<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: 96C3FF"></div> 
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: BEC0C2"></div> 

<div style="border:solid 10px black; height:50%; width:50%"></div> 

</body> 
</html>

在Chrome中它的罰款，並在身體的利潤率變化使得它在IE8看起來相同。但是在FF3中，兩個div不顯示，只是紅色背景上的黑色矩形。

如果我刪除z順序的東西，100％高度divs出現在FF中，但在黑色的div上。

爲什麼？之所以我想要這樣做並不明顯，在這個剝離的例子中，但我怎麼能使它工作？

編輯：我沒有文檔類型。完全複製粘貼到文件。我想這是其他問題之一。背景是重要的一部分，第三個div只是爲了繪製其他東西。在IE8/Chrome中，您會看到一個灰色/藍色背景，在FF3中只有一個紅色背景。

這將是一個固定的解決方案，包括元/ DOC型修復？

來源

2010-01-25 Mr. Boy

另外，請隨時指出任何其他天真的錯誤，但要清楚它們與主要問題是分開的。 – 2010-01-25 21:13:08

它應該是什麼樣子？我在IE8和FF3中打開了這個，除了黑色邊框在FF3中的灰色div邊緣外，它看起來非常相似。請注意，如果您將文檔類型定義放入...中，看起來_completely_會有所不同嗎？ – 2010-01-25 21:14:18

將示例代碼保存到文件中而不做更改。 – 2010-01-25 21:26:10

首先，是你使用DOCTYPE標誌，當你測試這個？您應該添加您的網站正在使用的任何DOCTYPE以獲得有用的結果。添加DOCTYPE和IE將開始像Firefox一樣行動（假設您使用正確的文檔類型）。

一件事那差異不是由於Z-指數...的瀏覽器給你鑲上框不同的高度。把東西放在裏面，或者把它的高度設置爲一個非相對值，並且它們看起來是相同的（給定我的文檔類型）。

我爲我的測試添加了DTD XHTML 1.0 Transitional文檔類型。

我認爲Firefox是正確的行爲。帶有-1 z-index的元素不會顯示，因爲它們在body標籤內。此外，由於您的身體標記沒有設置高度，因此在包含的元素上設置相對高度是沒有意義的。在body標籤上設置一個固定的高度，或者將html和body標籤的高度設置爲100％。

來源

2010-01-25 21:18:02

Firefox是顯示div的，但是他們不是彩色的，因爲你的膚色符是不正確的。

<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: 96C3FF"></div> 
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: BEC0C2"></div>

嘗試：

<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: #96C3FF"></div> 
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: #BEC0C2"></div>

注意＃的在顏色。

來源

2010-01-25 22:01:02

D'oh！我會嘗試... – 2010-01-26 00:21:50

的z-index不FF3正常工作，在IE和鉻

回答

相關問題