如何修复不同浏览器中的垂直间距变化？答案

【问题标题】：How to fix vertical spacing variations in different browsers?如何修复不同浏览器中的垂直间距变化？
【发布时间】：2013-01-07 06:25:33
【问题描述】：

我有一小段代码在我的 win7 机器上以完全不同的垂直间距在 firefox、chrome 和 ie9 中呈现。

<div id="main-compo">
                <div id="divisions" class="transparent">
                    <p><a href="#">p1</a></p>
                    <p><a href="#">p2</a></p>
                    <p><a href="#">p3</a></p>
                    <p><a href="#">p4</a></p>
                    <p><a href="#">p5</a></p>
                    <p><a href="#">p6</a>
                    <p style="border-bottom: none;"><a href="#">p7</a></p>
                </div></div>

http://jsfiddle.net/erea/96KBC/

我已经研究了一个多小时，但我仍然不知道为什么。任何帮助都会很棒，谢谢！

【问题讨论】：

使用重置样式表。 meyerweb.com/eric/tools/css/reset
在没有对其进行任何更改的情况下尝试了确切的 reset.css，它确实把网站搞砸了。我将在 jsfiddle 中尝试一下，看看会发生什么。

标签： html css internet-explorer google-chrome firefox

【解决方案1】：

试试

p {
    vertical-align: top;
}

【讨论】：

【解决方案2】：

发现line-height 是问题所在。

添加了这个，现在一切都很完美。

body {
    line-height: 1;
}

【讨论】：