IE6和IE7 z索引（非絕對）問題

此代碼目前適用於所有現代瀏覽器，而不是IE6/IE7。有什麼建議？我不能絕對定位任何這些：它需要適應內容。再次，我相信這在現代瀏覽器中完美運行。IE6和IE7 z索引（非絕對）問題

http://www.webdevout.net/test?02h&raw

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
    <title>Test</title> 
    <style type="text/css"> 
    body { padding: 0; margin: 0; } 
    #first { background: blue; padding: 0px 25px 25px 25px; margin-bottom: -10px; position; relative; z-index: 7; } 
    #second { background: #DDD; border: 1px dashed gray; height: 200px; position: relative; z-index: 8; display: block; } 
    #precedence { float: right; height: 40px; width: 40px; background-color: #f09; z-index: 9; position: relative; } 
    </style> 
    </head> 
    <body> 
    <div id="first"> 
     <div id="precedence"></div> 
    </div> 
    <div id="second"></div> 
    </body> 
</html>

同樣，這不能用絕對定位。

來源

2010-09-13 xckpd7

你的問題不太清楚，但我認爲你正在嘗試做這樣的事情？你的CSS更改爲：

body { 
padding: 0; margin: 0; } 
#first { 
background: blue; 
padding: 0px 25px 25px 25px; 
margin-bottom: -10px; 
z-index: 7; 
} 
#second { 
position: relative; 
background: #DDD; 
border: 1px dashed gray; 
height: 200px; 
z-index: 8; 
display: block; 
} 
#precedence { 
height: 40px; 
width: 40px; 
background-color: #f09; 
z-index: 9; 
position: absolute; 
left: 100%; 
margin:0 0 0 -65px; 
}

不一樣的，你有什麼，但也適用於IE6/7

是有絕對定位的元素存在。我知道你指定的不是絕對的，但看看它是如何工作的，因爲我認爲這是你想要的。

而且，在你的CSS有在#first性錯誤

position; relative;

應該

position: relative;

但該div並不需要無論如何定位

來源

2010-09-13 02:06:14

我特別說過，它「需要適應內容」，並且不能使用絕對定位。如果我可以使用絕對定位，這將是小菜一碟。粉紅色的盒子代表了一個標誌即將到來的界面的靈活部分。我不但不能這樣做，因爲這個盒子不適應圖像的大小，但是我已經設置了它，所以如果同一個欄上的導航鏈接與它接觸，那麼粉紅色框就會被包裹起來。所以這對我沒有幫助。 – xckpd7 2010-09-13 02:30:55

@ xckpd7是否需要將粉紅色框放在#first的25像素內的右側？如果菜單向右推進，它將包裹在菜單下方，但仍然在#first div內？ – 2010-09-13 02:54:24

所以基本上我剝離了很多代碼來隔離我試圖製作的問題。粉紅色的盒子基本上是一個類似的帶子，它總是來自頁面的頂部（有一點正確的填充）。頂部欄內有導航鏈接，它將控制#first元素的真實高度。導航鏈接會左移，粉紅色框會右移（粉紅色框首先出現在DOM中）。當他們相互接觸時，導航會在下面包裹（這可能是我不能使用abs的另一個原因）。 – xckpd7 2010-09-13 03:19:39

所以您發佈的鏈接與此無關？事實之後很好的解釋。

您的ie6/7問題源於保證金/填充問題，以及您聲明Chris J指出的定位衝突。你確實提到了克里斯忽視的絕對定位，但是他的解決方案是可行的，你要麼因爲違反了你的規則而要麼因爲你沒有看到它的價值。克里斯的標誌盒靈活適應標誌大小的變化，只是它的位置不會改變。最後....爲什麼你設置第二個div顯示：塊？這是它的默認值。

那麼簡單的傢伙

< DOCTYPE HTML PUBLIC！「 - // W3C // DTD HTML 4.01 // EN」「http://www.w3.org/TR/html4/strict。DTD」 > < HTML語言= 「en」的> <頭> <標題>測試< /標題> <風格類型= 「文本/ CSS」 > 體{填充：0;餘量：0;} ＃第一個{background：blue; padding：0 0 15px 25px; margin：0} #second {background：#DDD; border：1px dashed grey; height：200px} #precedence {float：right; height：40px; width： 40px; background-color：＃f09; margin-right：25px} </style > < /頭> <體> < DIV ID = 「第一」 > < DIV ID = 「優先級」 > < /格> < /格> < DIV ID = 「第二」 > < /格> </body > </html >

來源

2010-12-18 12:52:54 albert

IE6和IE7 z索引（非絕對）問題

回答

相關問題