怪的位置：在Mac WebKit瀏覽器絕對行爲

Question

我試圖定位複選標記的菜單項目旁邊通過執行以下操作：

#userInfo div.dropDownContent p span 
{ 
    position: absolute; 
    margin-left: -20px; 
} 

一個段落內部的跨度絕對定位，以保持菜單項文本的居中，否則複選標記與文本一起居中，並且看起來很糟糕。

正如您在此jsFiddle中看到的那樣，您的普通Windows瀏覽器中的複選標記看起來不錯，但是Mac和iPad上的Safari（甚至Mac上的Chrome）會在菜單外顯示覆選標記，可以使它移動一個像素。

有誰知道我在做什麼錯？它是一個webkit的錯誤？謝謝。

Answer 1

我的確在Safari中看到了這種奇怪的行爲，但我真的無法解釋它爲什麼只在瀏覽器中。

這就是說，this updated fiddle應該告訴你什麼爲我工作。

基本上，而不是絕對定位的跨度，我用相對定位，並將其設置到左-20px像這樣：

#userInfo div.dropDownContent p span 
{ 
    position: relative; 
    left: -20px; 
}