html - Firefox 和 Safari 之间的行高差异

Question

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

fiddle 位于 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;

这样做无论如何都不需要行高!

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

希望这对您有所帮助!