Firefox 的高度比 Chrome 高答案

【问题标题】：Bigger height in Firefox than in ChromeFirefox 的高度比 Chrome 高
【发布时间】：2014-02-27 03:33:59
【问题描述】：

Chrome 和 Firefox 的区别在于从导航开始的整个左栏的高度。下面是 ff 和 chrome 中列的对比图： http://tinypic.com/r/jhbynb/8

[这里][1]是代码：

<html>
    <nav>
        <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
            <li><a href="#">Link5</a></li>
            <li><a href="#">Link6</a></li>
        </ul>
    </nav>

     <div class="space"></div>
     <div class="block">
         <h2>Some text</h2>
         <p>Number of visitors: 28</p>  
     </div>
</html>

CSS

nav
{
    width: 230px;
    clear: both;
    padding-top: 8px
}

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
} 

nav li a
{
    display: block;
}

nav a:link
{
    color: #718785;
    display: block;
    border-bottom: 1px solid #d4d4d4;
    padding: 7px;
    text-decoration: none;
    font-size: 20px;
}

nav a:hover
{
    font-weight: bolder;
}

nav a:visited
{
    color: #718785;
    border-bottom: 1px solid #d4d4d4;
}

.space
{
    height: 34px;
    overflow: hidden;
    width: 100%;
}

http://jsfiddle.net/5ZEqL/2/

【问题讨论】：

标签： css google-chrome firefox height

【解决方案1】：

我认为这是因为不同的浏览器有不同的默认行高，所以如果你将 nav li a 设置为特定的行高，它在所有浏览器上看起来都是一样的。

http://jsfiddle.net/5ZEqL/4/

【讨论】：

谢谢克里斯，这是个问题。
我已经解决了我的问题，谢谢。我之前用过line-height:1.4。我将其替换为line-height:20px

【解决方案2】：

您可以更改特定浏览器的 css

@-moz-document url-prefix() {
/** Your css here **/
}

或者你可以使用这个：Css browser selector

【讨论】：