CSS定位-IE問題

我的佈局有問題...它應該很簡單，但我無法正確理解。它適用於Firefox，但不適用於IE。CSS定位-IE問題

問題：div rightBar應該調整大小的內容。如果有很多文字，它應該有相同的高度（因此，我使用絕對定位的頂部和底部）的內容是沒問題的，只是rightBar不會調整大小。

這裏是我的標記：

<div id="container" style="position:relative; width:100px;"> 
    <div id="content" style="position:relative; margin-right:10px;"></div> 
    <div id="rightBar" style="position:absolute; right:0; top:0; bottom:0px; width:10px;"></div> 
</div>

來源

2010-09-08 marius

標題說明了一切。 – Paul 2010-09-08 12:21:47

什麼版本的IE？在8它運行得很好。 http://jsfiddle.net/nxBAn/1/ – 2010-09-08 12:26:12

問題是由那裏是沒有DOCTYPE引起的。這會導致IE在Quirks模式下呈現HTML。如果您使用的是IE 8，則可以從工具菜單中選擇開發人員工具，並且會說明文檔模式是什麼作爲開發人員工具窗口的頂部。

試試這個標記來代替：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
    <div id="container" style="position:relative; width:100px;"> 
     <div id="content" style="position:relative; margin-right:10px;"></div> 
     <div id="rightBar" style="position:absolute; right:0; top:0; bottom:0; width:10px;"></div> 
    </div> 
</body> 
</html>

而且你不需要在rightBar的底部的像素爲0，將錨它。

來源

2010-09-08 12:26:25 moose56

這是所有隻是這個小代碼 – marius 2010-09-08 12:27:29

首先，你有一個寬度設置在rightBar，所以寬度不會改變。

您也有頂部和底部設置爲0 ...我不知道如何工作。

如果您希望高度相同，請將其設置爲一個值。

來源

2010-09-08 12:31:21 Martin

沒有人說我想改變寬度...我想改變rightBar的高度。頂部和底部爲0使得它遍佈父容器。它在FF和CHROME上工作，但不在IE上...... IT無法將高度設置爲固定值，因爲內容...如果內容div中的文字變大，rightBar必須展開....多數民衆贊成在 – marius 2010-09-08 12:36:22

@marius - 這個評論矛盾你的問題陳述「沒有人說我想改變寬度」，「它應該有相同的高度「你想改變哪個，寬度還是高度？ – 2010-09-08 12:46:34

這是一個特定於IE6的問題。它在IE7，IE8和IE9中運行良好。

第一點建議：放棄對IE6的支持;它比它的價值更麻煩。

但是，如果你必須支持IE6，問題是IE6不能算出元素有多高，除非你明確指定高度，所以它不知道如何處理bottom：0。如果你將高度樣式添加到外部div，內部樣式會突然找出底部所需的位置。

添加高度：0在IE6中也不會產生任何問題，因爲它實際上將它視爲最小高度，所以它會在需要時調整大小。不幸的是，其他瀏覽器會正確處理高度樣式，因此您無法爲IE6修復它而無需爲其他瀏覽器打開它。

如果您必須使其在IE6中工作，則需要使用瀏覽器黑客手段使修復對其他瀏覽器不可見。醜陋的東西。

來源

2010-09-08 12:39:32 Spudley

thx夥計，就是這樣..不知道我仍然在我的電腦上IE6 ...反正ty :-) – marius 2010-09-08 12:44:10

CSS定位-IE問題

回答

相關問題