Html Firefox中存在漏洞，但IE中没有_Html_Css_Internet Explorer_Firefox

Html Firefox中存在漏洞，但IE中没有

html css internet-explorer firefox

Html Firefox中存在漏洞，但IE中没有,html,css,internet-explorer,firefox,Html,Css,Internet Explorer,Firefox,我是CSS新手，使用Dreamweaver cs6。我的菜单按钮和Firefox中的主要内容之间有差距，但ie中没有。如有任何建议，将不胜感激。我可以填补Firefox中的空白，但我在IE中有一个重叠。我正试图让它们保持一致以下是我的html代码： <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>home</title> &l

我是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>

问题似乎是Firefox（

20px

）和Internet Explorer（

22.56px

）之间的渲染高度不匹配

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

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

我已经在Firefox41和InternetExplorer11上测试过了，高度看起来是一样的

@clovola的JSFIDLE使用了额外的CSS：

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

制表符的高度不是固定的，因此由字体的高度决定，但容器div的高度是固定的（64px）。正是这两种字体之间的高度差导致了出现间隙

是否要解决字体问题取决于您。但是，首先要做的是更改容器框，使其不需要固定的大小，并将其自身与选项卡的大小对齐。这将使你在将来的任何改变中变得更加容易

第一步是从

#Navbar#支架

上移除固定高度

这将触发选项卡集的底部边框跳到顶部。不是你想要的。您可以通过向CSS代码的相同部分添加新行来修复此问题，如下所示：

display: inline-block;

您的选项卡现在将在所有浏览器中正确显示

在不同的浏览器中仍然存在不同字体的问题

这里的问题是您使用的是

Arial Black

字体。但是Firefox中有一个已知的bug，它会导致错误显示

您可以在此处了解有关此错误的更多信息以及如何解决此问题：

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

谢谢你的快速回答，我先尝试了Spudley，它确实消除了这个差距，但是按钮和主要内容之间仍然存在黑线，这使得它看起来像标签

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

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

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

我在这里对此做了修改：。您可以在FireFox中通过降低

#holder

的高度来修复它。这可能会在IE中打破它：）@cpdproxy：提及您正在测试的Firefox和IE版本会很有帮助。

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