位置：絕對在位在Chrome中相對位置：

我在設計我的網站時犯了在所有瀏覽器上都沒有調試的主要錯誤。在Firefox（3.6.10）和IE8中，表單元素顯示正常，但在chrome（10）中，只顯示位置：絕對元素。位置：絕對在位在Chrome中相對位置：

我有一個由無序列表製成的表單。列表項目設置爲position：relative。它包含一個左浮動標籤，右浮動字段和一個位置：絕對小部件。

HTML：

<form><ul> 
    <li> 
     <label>Name</label> 
     <input type="text" /> 
     <a id="nameGenerator" class="widget"></a> 
    </li> 
</ul></form>

CSS：

form ul li{ 
    margin: 5px; 
    clear: both; 
    position:relative; 
} 
form label{ 
    float:left; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 
form input{ 
    float:right; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 
form .widget{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 99; 
}

我可以通過刪除位置「修理」這樣的：相對但這是不能接受的。有什麼我可以做，以產生預期的結果？

來源

2011-03-17 Bob Roberts

而哪些是理想的結果？也許設置和示例？ – easwee 2011-03-17 12:18:11

@Myles，它是不可接受的，因爲它會導致所有絕對位置元素粘貼到屏幕的頂部，而不是留在它們各自的列表項中。 – 2011-03-17 12:18:40

@Myles灰色 - position：static是默認定位 - 不是相對的。他需要li是相對的，因爲每個元素都必須是它自己的父元素，否則它將相對於body而不是li定位。 – easwee 2011-03-17 12:18:53

添加到您的CSS：

form ul li{ 
    overflow:auto; 
}

http://jsfiddle.net/cTTVs/1/

來源

2011-03-17 12:18:19

....的名字是什麼？謝謝，但是天文名字是如何做到的？現在看起來很好，我只是不明白爲什麼。 – 2011-03-17 12:20:39

因爲浮動和絕對定位的元素使周圍元素爲空的自然流動的元素。只有普通的元素會使周圍的內容變得適合內容，這是一個浮動的已知「問題」（或者實際上，正常行爲）。另一個解決方案是在每個列表項中添加一個div，並在其上添加'clear：both' – 2011-03-17 12:23:50

好吧，謝謝你，你無法形容地硬搖滾。我很擔心重做我的網頁應用程序的所有20頁......完全由表單組成。 – 2011-03-17 12:28:31

只需添加overflow:hidden到form ul li規則。在很多情況下，這個工作可以運行better than overflow:auto when clearing floats，其中滾動條可能出現在元素中（可能是您的'小部件'）。

更新：

我有一個想法，如果你的小部件也需要展現的東西的清單，如意見箱或日期選擇器，你將更好地不使用overflow值來清除浮動是。另一種方法是the old clearfix hack，它可能更合適。 Check out this demo其中有一個人造小部件，顯示不同的解決方案以及一個高小部件如何與他們合作。

演示：jsfiddle.net/Marcel/ghaHz

來源

2011-03-17 12:21:56 Marcel

隨着更新，這個答案比我的要好得多。 +1 – 2011-03-17 13:43:28

添加overflow:visible，它會解決你的問題。

來源

2012-12-13 09:15:23 Shreyas

位置：絕對在位在Chrome中相對位置：

回答

相關問題