Firefox中的高度比Chrome要大。

Question

Firefox中的高度比Chrome要大。

3

我注意到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/

- corry

2个回答

0

您可以为特定的浏览器更改CSS样式

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

或者你可以使用这个：CSS浏览器选择器

- user2099810

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris · Accepted Answer

我认为这是因为不同的浏览器具有不同的默认行高，因此如果您将nav li a设置为特定行高，则在所有浏览器上看起来都一样。 http://jsfiddle.net/5ZEqL/4/