Firefox中的高度大于Chrome中的高度

cor*_*rry 3 css firefox height google-chrome

我在浏览器开始的整个左列的高度上有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>
Run Code Online (Sandbox Code Playgroud)

的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%;
}
Run Code Online (Sandbox Code Playgroud)

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

小智 5

我认为这是因为不同的浏览器具有不同的默认行高,因此,如果将其设置nav li a为特定的行高,则在所有浏览器上它将看起来相同。

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