css - 奇怪的位置 :absolute behaviour on Mac webkit browsers

Question

我试图通过执行以下操作在菜单项旁边放置一个复选标记:

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

段落内的 span 是绝对定位的，以保持菜单项文本的居中，否则复选标记与文本一起居中，这会使它看起来很糟糕。

正如您在此 jsFiddle 中看到的那样，复选标记在普通的 Windows 浏览器中看起来没问题，但 Mac 和 iPad 上的 Safari(甚至可能是 Mac 上的 Chrome)在菜单外显示复选标记，我无法做任何事情来让它移动一个像素。

有谁知道我做错了什么？这是一个 webkit 错误吗？谢谢。

Answer 1

我确实在 Safari 中看到了这种奇怪的行为，我真的无法解释为什么它只出现在该浏览器中。

也就是说，this updated fiddle应该向您展示什么对我有用。

基本上，我没有绝对定位 span，而是使用相对定位并将其设置为左 -20px，如下所示:

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