Firefox 中的差距，但 IE 中没有答案

【问题标题】：Gap in Firefox but not in IEFirefox 中的差距，但 IE 中没有
【发布时间】：2016-01-16 05:52:40
【问题描述】：

我是全新的 CSS 新手，并且正在使用 Dreamweaver cs6。我的菜单按钮和 Firefox 中的主要内容之间存在差距，但在 ie 中没有。任何建议将不胜感激。我可以填补 Firefox 中的空白，但后来我在 IE 中得到了重叠。我正试图让它们齐平。

这是我的html代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<style type="text/css">
body {
    background-color: #06F;
    background-image: url(Images/Website_Images/Banners/bg-banner-blue.png);
}
#header {
    background-repeat: no-repeat;
    background-position: center;
    height: 40px;
    z-index: 1;
    position: relative;
    top: 0px;
    padding: 0px;
    margin: 0px;
    clear: both;
    float: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width: auto;
}
</style>
<link href="Main_MenuCSS.css" rel="stylesheet" type="text/css" />
<link href="Main_BodyCSS.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>

<div id="Navbar">
<div id="holder">

<ul>
<li><a href="index.html" id="onlink">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div><!-- end holder -->
</div><!-- end navbar -->
<div id="body">Main Body Here</div>
<div id="footer">Footer Here</div>
</body>
</html>

这是我的 CSS：

#Navbar {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;

}

#Navbar #holder {
    height:64px;
    border-bottom:1px solid #000;
    width: 755px;
    padding-left:25px;

}

#Navbar #holder ul {
    list-style:none;
    margin:0;
    padding:0;
}

#Navbar #holder ul li a {
    text-decoration: none;
    float: left;
    margin-right: 5px;

    font-family: "Arial Black", Gadget, sans-serif;
    color: #FFF;
    border: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 20px;
    width: 100px;
    text-align: center;
    display: block;
    background: #69f;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

}

#Navbar #holder ul li a:hover {
    background:#F90;
    color:FFF;
    text-shadow:1px 1px 1px #000;

}

#holder ul li a#onlink{
    background: #fff;
    color: #000;
    border-bottom: 1px solid #FFF;
}

#holder ul li a#onlink:hover {
        background:#FFF;
        color:#69F;
        text-shadow:1px 1px 1px #000;

}

【问题讨论】：

我在这里做了一个小提琴：jsfiddle.net/clovola/xx5jyq6b。您可以通过降低#holder 的高度在FireFox 中修复它。不过，这可能会在 IE 中破坏它:)
@cpdproxy：提及您正在测试的 Firefox 和 IE 版本会很有帮助。

标签： html css internet-explorer firefox

【解决方案1】：

问题似乎是 Firefox (20px) 和 Internet Explorer (22.56px) 之间的渲染高度不匹配。

明确定义文本的行高将确保所有浏览器为菜单按钮呈现相同的高度：

#Navbar #holder ul li a {
    line-height: 23px;
}

我在 Firefox 41 和 Internet Explorer 11 中对此进行了测试，高度看起来相同。

@clovola 的 jsfiddle 加上 CSS 的额外行：https://jsfiddle.net/xx5jyq6b/2/

【讨论】：

【解决方案2】：

这里的核心问题是 IE 和 Firefox 使用不同的字体来呈现菜单中的文本。

tab的高度不是固定的，所以是由字体的高度决定的，但是容器div的高度是固定的（64px）。导致间隙出现的是两种字体之间的高度差异。

是否要修复字体问题取决于您。然而，首先要做的是更改容器框，使其不需要固定大小，并且只需将自身与标签的大小对齐即可。这将使您在以后可能进行的任何更改时变得更加轻松。

第一步是去掉#Navbar #holder的固定高度。

这将触发标签集的底部边框跳到顶部。不是你想要的。您可以通过在 CSS 代码的同一部分添加新行来解决此问题，如下所示：

display: inline-block;

您的标签现在将在所有浏览器中正确显示。

你仍然有不同浏览器中不同字体的问题。

这里的问题是您使用Arial Black 作为您的字体。但是 Firefox 中存在一个已知错误，导致它无法正确显示。

您可以在此处找到有关此错误以及解决方法的更多信息：Is there a trick to show Arial Black in Firefox?

希望这足以让您的网站在所有浏览器中看起来大致相同。

【讨论】：

【解决方案3】：

感谢您的快速回答，我先尝试了 spudleys，它确实消除了间隙，但是按钮和主要内容之间仍然存在黑线，使其看起来像标签。

然后我尝试了 Ryans 的回答，它按照我想要的方式工作。

#Navbar #holder ul li a {
    line-height: 23px;
}

感谢你们的帮助。我还将考虑更改字体，以便它们在不同的浏览器中匹配。

【讨论】：