奇怪的位置：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;
}