Question

我一直在努力从firefox中的这个页面中删除额外的行空间（或填充，边距，无论是什么）：

http://emctalk.com.au/

看菜单？将它与chrome进行比较，你会发现菜单位于背景下方太远，使得布局看起来很破碎。

无论如何，我尝试将line-height: 1px添加到UL项目中，然后取出LI元素上的height，使它们尽可能小。

这实际上使它看起来很正常，但这样，我觉得是一个黑客。我很想知道实际问题是什么，以便我将来可以解决它。

如果有任何关于如何修复它的建议，那将非常感激。我使用的是FF5和最新的谷歌浏览器。

感谢。

Answer 1

更改CSS中的以下内容：

/* http://emctalk.com.au/site/assets/template/css/base.css?v2( line: 375 )*/

.home a {
    display: block;
    height: 150px;
    text-indent: -2000em;
}

到

/* http://emctalk.com.au/site/assets/template/css/base.css?v2( line: 375 )*/

.home a {
    display: block;
    height: 140px; /*The height 150px causes the problem*/
    text-indent: -2000em;
}

这应解决问题。

Answer 2

设置为#mainmenu li时，问题在于计算display:inline的高度。 Mozilla必须使用填充顶部和填充底部13px来计算背景刻度图像的放置位置。

在firebug中，我更改了下面的填充和高度设置以获得预期的结果。

#mainmenu li {
    display: inline;
    float: left;
    height: 30px;
    padding-left: 30px;
    padding-top: 13px;
}

Answer 3

使用

#mainmenu {
float:left;
}

在css中包含此内容并按照ui调整背景。

为什么Firefox在这里显示额外的一行？

3 个答案: