CSS：在Chrome中显示绝对定位元素

Question

所以我有以下CSS定位设置为span标记的图像：

.dc-mega-icon {
    background-image: url(...);
    display: inline-block;
    position: absolute;
    top: 18px;
    width: 16px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    margin-left: 5px;
}

HTML：

<li class="liMenuItem" id="itemLogout">

    <a href="#" class="menuItem dc-mega">
        <span class="menuIcon">&nbsp;</span>
        My Profile
        <span class="dc-mega-icon"></span>
    </a>

    <div class="sub-container non-mega">
        <ul id="CCMenuOptions" class="sub" style="display: none;">
            <li class="mySupport"><a href="#">Dashboard</a></li>
            <li class="mySupport"><a href="#">My Support</a></li>
        </ul>
    </div>

</li>   

在Firefox / IE中，箭头显示正确：

IN CHROME箭头显示在绿色图标顶部的左侧：

为什么会这样？我注意到在其他基于WEbkit的浏览器中，如Opera和Safari，这种情况不会仅发生在Chrome中。

Answer 1

在我看来，Chrome正确显示它。默认情况下，position: absolute会在top: 0，left: 0显示该元素。您根本不使用向左或向右移动位置。尝试添加right: 0，看看会发生什么。您还需要父元素上的position: relative;。