我正在设计一个网站(新手),我在 Firefox 中遇到了水平导航菜单的这个问题,我一直坚持着。
这是它在最新的 Safari、Chrome、Webkit (OS X) 中的样子: http://i.imgur.com/iMDyO.png
这是它在 Firefox 5 (OS X) 中的样子: http://i.imgur.com/Bp4y0.png
这是我的 CSS,我在使用伪元素时遇到了一些问题,因此“丝带”的折叠端是背景图片
.mod_menu {
width:940px;
height:50px;
background-image:url("tl_files/images/navbg.png");
background-repeat:repeat-x;
}
.mod_menu ul {
margin:10px 0 0 15px;
padding:0;
}
.mod_menu li {
position:relative;
float:left;
border-right:1px solid #247db8;
list-style-type:none;
border-left: 1px solid #005c8e;
}
.mod_menu li a {
display:block;
padding:5px 25px;
font-family:Helvetica, Arial, sans-serif;
font-size:10pt;
color:#ffffff;
text-decoration: none;
text-shadow: 0px -1px 1px #092c47;
}
这是 HTML:
<div id="wrapper">
<div id="header">
<div class="inside">
<div id="logo">
<a href="/index.html">
<img src="tl_files/images/logo_f.png" alt="Logo" />
</a>
</div>
<div class="mod_quicklink block">
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="prihlaseni.html">Přihlášení</a></li>
<li><a href="registrace.html">Registrace</a></li>
</ul>
</div>
<div class="mod_navigation mod_menu block">
<a href="#skipNavigation1" class="invisible">Přeskočit navigaci</a>
<ul class="level_1">
<li class="active first"><a href="index.html" class="first">RL - Corpus</a>
<img id="drop" src="tl_files/img/drop.png" alt="" /></li>
<li class="sibling"><a href="novinky.html" title="Novinky" class="sibling">Novinky</a></li>
<li class="sibling"><a href="zdravotnicka-cinnost.html" title="Zdravotnícka Činnost" class="sibling">Zdravotnícka činnost</a></li>
<li class="sibling"><a href="skolici-cinnost.html" title="Školíci Činnost" class="sibling">Školíci činnost</a></li>
<li class="sibling"><a href="metoda-v-vojty.html" title="Metoda V. Vojty" class="sibling">Metoda V. Vojty</a></li>
<li class="sibling last"><a href="kontakt.html" title="Kontakt" class="sibling last">Kontakt</a></li>
</ul>
<a name="skipNavigation1" id="skipNavigation1" class="invisible"> </a>
</div>
</div>
</div>
</div>
最佳答案
尝试将 clear: left 添加到类 .mod_menu 中。您的 Logo 向左浮动,如果不清除 float ,那么您的 mod_menu 将尝试在同一行上继续(至少在 Firefox 中)。我还推荐 Firebug。
关于css - Firefox 的水平导航位置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6467661/