0
現在、私のウェブサイトのナビゲーションバーを設計していますが、Firefoxで問題が発生しました。私は左に私のロゴを、右に私のナビゲーションコンテンツを持っていますが、ナビゲーションコンテンツ全体がnav divから押し出されています(Firefox上のみ)。それを修正するために私は何ができますか?Firefoxが浮動小数点のときにdivからコンテンツをプッシュ
のFirefox: http://i.cubeupload.com/OoAJIe.png
クローム: http://i.cubeupload.com/QXo2KS.png
ここでは私のHTMLである:ここでは
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo"><a href="index.php"><img src="images/Spendr.png" /></a></li>
<li class="tab btn"><a href="panel/index.php"><button>Kurv: 0</button></a></li>
<li class="tab txt"><a href="#udbetaling">Nye varer</a></li>
<li class="tab txt"><a href="#features">Udsalg</a></li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
は私のCSSです:
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed /*fixed*/;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li, .nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
} .nav .tab{
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab { border-radius: 3px; }
.nav .txt a {
padding-left:18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
'パディングtop'に' .logo IMG {マージントップ}を変更してみてください –