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

Question

我正在尝试对齐相对于容器元素绝对定位的两个元素，但我不明白为什么在应用相同的顶部值时，其中一个元素(ul)会稍微向下移动一点。可以直播看here

我有以下 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;
}​

Answer 1

您的浏览器可能正在向 ul 元素添加额外的填充。mozilla 因这个而声名狼藉。

检查元素以检查填充。

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

-webkit-padding-start:0px;