我一直在使用顶级菜单栏的网站上工作。在Chrome中，它就像一个魅力，但当我在Firefox或IE上打开它时，子菜单的高度不正确。链接到网站：删除旧链接。我也做了JSFiddle。我在不同的地方搜索过它，最多的是同样的事情：由于浏览器的不同而无法修复。这也是我的情况还是某个地方有一个愚蠢的错误？
CSS代码：
@charset"utf-8";
.centreer {
width:1000px;
margin: 0 auto;
margin-top:50px;
position: relative;
height:auto;
}
ul, li {
list-style:none;
float: right;
}
.menu_tekst li {
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
text-transform:uppercase;
max-height:52px;
height:52px;
text-height:52px;
}
.menu_tekst li.titel_blok ul.sub li.titel_blok_sub .link_titel {
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
text-transform:uppercase;
max-height:52px;
height:52px;
text-height:52px;
}
.onder_menu {
height:52px;
}
.link_titel {
text-decoration:none;
padding:15px 10px 16px 10px;
color:#444;
background-color:none;
}
.actief {
background-color:#444;
color:#999;
}
.menu_tekst li:hover > a.link_titel {
color:#999;
background-color:#444;
}
.tussenstuk {
background-color:none;
height:30px;
width:5px;
}
.logo {
position:absolute;
padding-bottom:2px;
border:none !important;
}
.sub_menu {
height:52px !important;
background-color:#444;
}
.menu_tekst ul.sub_bannen {
width:1000px;
margin:32px 0 0 0;
left:-173px;
padding:0;
position: absolute;
float:left;
display:none;
}
.menu_tekst ul.sub_kalender {
width:1000px;
margin:32px 0 0 0;
left:-215px;
padding:0;
position: absolute;
float:left;
display:none;
}
.menu_tekst ul.sub_media {
width:1000px;
margin:32px 0 0 0;
left:0px;
padding:0;
position: absolute;
float:left;
display:none;
}
ul.sub_media .link_titel, ul.sub_kalender .link_titel, ul.sub_bannen .link_titel {
text-decoration:none;
padding:16px 10px 16px 10px;
color:#999;
background-color:#444;
}
li {
max-height:20px !important;
}
ul.sub_media li.titel_blok_sub:hover > a.link_titel, ul.sub_bannen li.titel_blok_sub:hover > a.link_titel, ul.sub_kalender li.titel_blok_sub:hover > a.link_titel {
color:#979176 !important;
}
li.bannen:hover > ul.sub_bannen, li.media:hover > ul.sub_media, li.kalender:hover > ul.kalender {
display:block !important;
}
li.bannen.actief > ul, li.media.actief > ul, li.kalender.actief > ul {
display:block;
}
.sub .actief {
color:#979176 !important;
}
.titel_blok:hover > .sub {
display:block;
}
.menu_tekst > .actief > .sub {
display:block;
}
.menu_tekst:hover > .actief > .sub {
display:none;
}
.menu_tekst:hover > .actief:hover > .sub {
display:block;
}
.sub_media ul.sub_sub_fotos, .sub_media ul.sub_sub_formulieren, .sub_media ul.sub_sub_bestanden {
width:1000px;
background-color:#AAA;
height:36px;
margin:16px 0 0 0;
padding:16px 0 0 0;
left:0px;
float:left;
display:none;
position:absolute;
z-index:50;
}
.sub_media ul.sub_sub_fotos li.space_left {
margin-left:140px;
}
.sub_media ul.sub_sub_bestanden li.space_left_bestanden {
margin-left:10px;
}
ul.sub_sub_fotos .link_titel, ul.sub_sub_formulieren .link_titel, ul.sub_sub_bestanden .link_titel {
text-decoration:none;
padding:16px 10px 16px 10px;
color:#444;
background-color:#AAA;
}
li.fotos:hover > ul.sub_sub_fotos, li.formulieren:hover > ul.sub_sub_formulieren, li.bestanden:hover > ul.sub_sub_bestanden {
display:block !important;
}
ul.sub_sub_fotos li:hover > a.link_titel, ul.sub_sub_formulieren li:hover > a.link_titel, ul.sub_sub_bestanden li:hover > a.link_titel {
background-color:#AAA !important;
color:#000 !important;
}
li.fotos.actief > ul, li.formulieren.actief > ul, li.bestanden.actief > ul {
display:block !important;
}
.titel_blok_sub:hover > .sub_sub {
display:block;
}
.sub > .actief > .sub_sub {
display:block;
}
.sub:hover > .actief > .sub_sub {
display:none !important;
}
.sub:hover > .actief:hover > .sub_sub {
display:block !important;
}
.sub_sub_fotos .actief, .sub_sub_formulieren .actief, .sub_sub_bestanden .actief {
color:#000 !important;
}
HTML代码：
<div class="centreer">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div class="menu_b">
<div class="logo">
<a href="index.php"><img width="375" height="52px" title="Home" src="afbeeldingen/menu/logo.gif"></a>
</div>
<ul class="menu_tekst">
<li class="titel_blok"><a class="link_titel" href="faq.php">Faq</a></li>
<li class="tussenstuk"></li>
<li class="titel_blok"><a class="link_titel" href="contact.php">Contact</a></li>
<li class="tussenstuk"></li>
<li class="titel_blok media"><a class="link_titel" href="media.php">Media</a>
<ul class="sub_media sub">
<li class="titel_blok_sub formulieren"><a class="link_titel" href="media/formulieren.php">Formulieren</a>
<ul class="sub_sub_formulieren sub_sub">
<li class="space_left_formulieren"> </li>
<li><a class="link_titel" href="media/formulieren.php#fiche">Medische fiche</a></li>
</ul>
</li>
<li class="titel_blok_sub bestanden"><a class="link_titel" href="media/bestanden.php">Bestanden</a>
<ul class="sub_sub_bestanden sub_sub">
<li class="space_left_bestanden"> </li>
<li><a class="link_titel" href="media/bestanden.php#algemeen">Algemene brieven</a></li>
<li><a class="link_titel" href="media/bestanden.php#pioniers">Pioniers</a></li>
</ul>
</li>
<li class="titel_blok_sub fotos"><a class="link_titel" href="media/fotos.php">Foto's</a>
<ul class="sub_sub_fotos sub_sub">
<li class="space_left"> </li>
<li><a class="link_titel" href="media/fotos/2013_2014.php">2013-2014</a></li>
<li><a class="link_titel" href="media/fotos/2012_2013.php">2012-2013</a></li>
<li><a class="link_titel" href="media/fotos/kamp/kampfotos.php">Kampfoto's</a></li>
</ul>
</li>
<li class="titel_blok_sub filmpje"><a class="link_titel" href="media/filmpje.php">Leidingsfilmpje</a></li>
</ul>
</li>
<li class="tussenstuk"></li>
<li class="titel_blok kalender actief"><a class="link_titel actief" href="kalender.php">Kalender</a>
<ul class="sub_kalender sub">
<li class="titel_blok_sub"><a class="link_titel" href="quiz/eindscore.php">Eindscore Quiz</a></li>
</ul>
</li>
<li class="tussenstuk"></li>
<li class="titel_blok bannen"><a class="link_titel" href="bannen.php">Bannen</a>
<ul class="sub_bannen sub">
<li class="titel_blok_sub"><a class="link_titel" href="bannen/plusachttien.php">+18</a></li>
<li class="titel_blok_sub"><a class="link_titel" href="bannen/pluszestien.php">+16</a></li>
<li class="titel_blok_sub"><a class="link_titel" href="bannen/sjo.php">Sjo</a></li>
<li class="titel_blok_sub"><a class="link_titel" href="bannen/knim.php">Knim</a></li>
<li class="titel_blok_sub"><a class="link_titel" href="bannen/joros.php">Joro's</a></li>
<li class="titel_blok_sub"><a class="link_titel" href="bannen/grovers.php">Grovers</a></li>
<li class="titel_blok_sub"><a class="link_titel" href="bannen/piepers.php">Piepers</a></li>
</ul>
</li>
<li class="tussenstuk"></li>
<li class="titel_blok"><a class="link_titel" href="info.php">Info</a></li>
<li class="tussenstuk"></li>
<li class="titel_blok"><a class="link_titel" href="index.php">Home</a></li>
</ul>
</div>
<div class="onder_menu">
</div>
<div class="sub_menu">
</div>
</div>
答案 0 :(得分：1)
我看到菜单上有溢出，如果你的意思是“菜单大小不正确”，那么你应该查看子菜单的链接元素。
您的链接元素
padding: 16px 10px 16px 10px;
将此更改为
padding: 16px 10px 12px 10px;
Chrome和Firefox在我的Mac上看起来一样。