Question

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

小提琴在http://jsfiddle.net/7BZGU/7/

这是我的代码 - 有什么明显的我做错了吗？我理解浏览器以不同的方式呈现内容，但我不确定为什么两个现代浏览器在处理漂亮的代码时会有这样的差异......

HTML

<p>

CSS

<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>

Answer 1

我做了一些有助于间距非常接近的事情！

我从你的ul中删除了行高：如果文本换行，这么低的行高就会产生混乱的文字。
通过以下方式自动设置段落的边距：

保证金：10px 0px;
我相信你要做的是对齐子弹图像，对吗？要做到这一点，最好使用：

background-position：0px 10px;

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

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

希望这有帮助！

Firefox和Safari之间的行高差异

1 个答案: