Firefox 和 Safari 的行高差异

Question

这让我有点发疯...我正在开发一个网站并试图让<ul> 在 Safari (v 7.0.1) 和 Firefox (v 25.0.1) 上一致地呈现。我已经尽可能地简化了 CSS 和 HTML……“职位”（<a> 标签）和“位置”（<p> 标签）之间的距离仍然存在差异两个浏览器之间的几个像素。

小提琴位于http://jsfiddle.net/7BZGU/7/

这是我的代码——有什么明显的我做错了吗？我理解浏览器呈现不同的东西，但我不确定为什么两个现代浏览器在处理漂亮的普通代码时会有如此大的差异......

HTML

<div id="main">
    <div id="current-openings">
        <h3>Current Openings</h3>
        <ul>
            <li>
                <a href="#">Junior Risk Reporting Analyst</a>
                <p>Chicago, IL</p>
            </li>
            <li>
                <a href="#">Trading Data Analyst</a>
                <p>Houston, TX</p>
            </li>
        </ul>
    </div>
</div>

CSS

#current-openings {
    margin: 30px 0 10px 50px;
    font-family: Verdana;
}

#current-openings h3 {
    font-size: 25px;
}

#main ul {
    margin: 15px 0 0 0;
    line-height: 5px;
}

#main ul li {
    list-style-type: none;
    padding: 4px 0 25px 21px;
}


#main p {
    font-size: 11px;
    font-style: italic;
}

Answer 1

我做了几件事来帮助间距非常接近！

1. 我从你的 ul 中删除了行高：一旦文本换行，那么低的行高会造成文本混乱）

2. 通过这样做自动设置段落的边距：

   边距：10px 0px;

3. 我相信您要做的是对齐子弹图像，对吗？为此，最好使用：

   背景位置：0px 10px;

这样做无论如何都消除了对行高的需求！

这有助于覆盖初始段落样式并专门设置它们，因此它适用于多个浏览器。

希望这会有所帮助！