CSS定位-IE問題
[英]CSS Positioning - IE problem
問題描述
我的版式有問題...應該很簡單，但我無法正確解決。 它適用於Firefox，但不適用於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>
3 個解決方案
解決方案1
1 2010-09-08 12:31:21
首先，您在rightBar上設置了寬度，因此寬度不會改變。
您還將“頂部”和“底部”設置為0 ...我不知道它是如何工作的。
如果希望高度相同，則將其設置為一個值。
解決方案2
0 2010-09-08 12:26:25
該問題是由於沒有文檔類型引起的。 這將導致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底部的px，因為0會將其錨定。
解決方案3
0 2010-09-08 12:39:32
這是IE6特有的問題。 在IE7，IE8和IE9中可以正常工作。
第一點建議：放棄對IE6的支持； 它比價值更麻煩。
但是，如果必須支持IE6，問題是IE6無法計算出元素的高度，除非您明確指定高度，所以它不知道對bottom：0怎么做。 如果您在外部div上添加高度樣式，則內部div會突然計算出需要放置底部的位置。
添加height：0也不會在IE6中引起任何探測，因為它實際上將其視為最小高度，因此如果需要，它將調整大小。 不幸的是，其他瀏覽器將正確處理高度樣式，因此您不能在不破壞其他瀏覽器的情況下為IE6修復它。
如果必須使其在IE6中工作，則需要使用瀏覽器黑客程序使該修補程序對其他瀏覽器不可見。 丑陋的東西。
跨度定位IE和一些CSS的未知問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.