由於firefox和chrome中CSS的錯位列表元素

我有一個在<ul>內部呈現的名稱列表。我應用了一些CSS代碼，但面對一些瀏覽器特定的問題。由於firefox和chrome中CSS的錯位列表元素

鉻：列表元素得到由1行移位。
Firefox：所有列表項都摺疊爲一個項目。

HTML

<div id='container'> 
<ul class='list'> 
    <li> <div class='rel'> 
      <div class='abs'> item 1 </div> 
    </div> </li> 

    ... More items similar to above one

的CSS

#container { 
    height: 100px; 
    overflow-y:scroll; 
    width: 200px 
} 

.list { 
    background-color: skyblue; 
} 

.rel { 
    position: relative; 
} 

div.abs { 
    position: absolute; 
    left: 20px; 
}

我想知道這種不當行爲在這兩個瀏覽器的原因。我寫錯了CSS？

更新：隨着<div class='abs'>我有很多的代碼，我在這裏沒有添加，也沒有必要和ABS div的內容定位相對於其父即<div class='rel'>

來源

2013-05-21 sachinjain024

的問題確實是UI元素的

div.abs { 
position: absolute; 
left: 20px; 
}

此位置與階級「ABS」 20像素到左邊（和0像素從頂部）的每一個元素。

您想要實現什麼？你的菜單是水平還是垂直？

水平：使用float：left或display：內聯margin-left：20px;

垂直：用於20像素的保證金左： http://jsbin.com/ediloh/17/edit

予先加入餘量：0像素刪除ul元素的頂部和底部邊緣。接下來，我添加了20px的左邊距，以將其移到右側。

替代方法：在li元素上放置margin-left。這不會移動圓圈

來源

2013-05-21 10:07:20 Pepe

謝謝@Pepe我知道你在Jsbin編輯器中使用margin的替代方法。我只是想知道定位的原因在這裏不起作用的原因嗎？ – sachinjain024

通過在您的li元素上使用position：absolute，您可以將它們帶出正常的頁面流。這意味着它們與其他任何東西都沒有關係，只是它們的第一個具有位置屬性的父對象。這裏是位置相對的ul元素。這個關係可以通過使用top/bottom/right/left來給出一個值。您使用過的左側：0px。如果沒有給出top/bottom值，它將使用top：0px。因此，每個li元素作爲與ul元素的關係：位於左側：20px，top0px。李元素之間沒有任何關係，因此不會互相推低。 – Pepe

非常感謝..我看到這裏有一些混亂。我的ul元素不是'relative'，而是有一個相對定位的rel類div。如果相對位置被添加到ul，那麼我認爲你的推理是正確的，但在這裏我的div是相對定位的。你能檢查一下這個嗎？ – sachinjain024

-1

什麼結果你真的想。您正在修正div.abs在其包含的div.rel中縮進20像素。

您能否介紹一下您正在努力實現的目標。

永

來源

2013-05-21 09:55:15 wingyip

我認爲這應該是一個評論，而不是回答這個問題。 – sachinjain024

我當時沒有留下評論，因爲我沒有足夠的積分 - 當時還沒有完全弄清楚Stackoverflow是如何工作的。現在明白了。只是試圖幫助 – wingyip

與position:absolute的div取出頁面流，基本上使它們的父的div有根本沒有內容（沒有內容達任何寬度或高度是）。所以他們會崩潰。

來源

2013-05-21 10:05:41

如果說'position：absolute'的元素被取出頁面，那麼爲什麼列表元素不會在body的開始處呈現。我的理解是，如果他們的父母是相對定位的，那麼他們將w.r.t移到其父母。 – sachinjain024

Checkout Point4在http://www.barelyfitz.com/screencast/html-training/css/positioning/ – sachinjain024

由於firefox和chrome中CSS的錯位列表元素

回答

相關問題