Question

在导航开始的整个左列的高度上，Chrome和Firefox之间存在差异。这是ff和chrome中列的比较图片： http://tinypic.com/r/jhbynb/8

[here] [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/

Answer 1

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

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

Answer 2

您可以更改特定broswer的css

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

或者你可以使用它：Css browser selector

Firefox中的高度比Chrome高

2 个答案: