Question

我是CSS的新手品牌，我使用的是Dreamweaver cs6。我的菜单按钮和Firefox中的主要内容之间有差距，但不是。任何建议将不胜感激。我可以填补Firefox中的空白，但随后我在IE中得到重叠。我试图让他们成为同花顺。

enter image description here

这是我的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;

}

Answer 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/

Answer 2

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

标签的高度不固定，因此它取决于字体的高度，但容器div的高度是固定的（64px）。两种字体之间的高度差异导致出现间隙。

是否要修复字体问题取决于您。然而，要做的第一件事就是更换容器盒，使其不需要固定的尺寸，并且只需将自身排列到标签的大小。这将使您未来的任何更改变得更容易。

第一步是从#Navbar #holder删除固定高度。

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

display: inline-block;

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

在不同的浏览器中，您仍然遇到不同字体的问题。

此处的问题是您使用Arial Black作为字体。但是Firefox中存在一个已知的错误，导致错误显示。

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

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

Answer 3

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

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

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

谢谢你的帮助。我还将研究如何更改字体，以便它们在不同的浏览器中匹配。

Firefox中的差距，但IE中没有

3 个答案: