html - 垂直对齐到绝对定位的元素

Question

我试图对齐两个相对于容器元素绝对定位的元素，但我不明白为什么在应用相同的顶部值时，其中一个元素（ul）会下降一点。你可以在这里看到它

我有以下 HTML：

<div id="header">
    <div class="inner">
        <span id="logo_description"> Description comes here </span>
        <ul id="user_menu">
            <strong>name</strong> | 
            <a href="#"> Account </a> |
            Language
            <select> 
                <option> Option1 </option>
                <option> Option2 </option>
            </select>                
        </ul>
    </div>
</div>

以及以下 CSS：

#header {
    float: left;
    margin-bottom: 15px;
    padding: 8px 0 13px;
    width: 100%;
    height: 51px;
}

#header .inner {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

#header .inner #logo_description {
    position:absolute;
    top:20px;
}

#header #user_menu {
    display: inline;
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 20px;
    text-align: right;
}​

​</p>

Answer 1

您的浏览器可能正在向 ul 元素添加额外的填充。Mozilla因此而臭名昭著。

检查元素以检查填充。

例如，这将从 chrome 中删除默认填充。

-webkit-padding-start:0px;