1

IEとOperaで見栄えの良い単純なフローティング水平リストがありますが、Firefoxには上部に余分なパディングまたはマージンがあり、修正方法がわかりません..ディスプレイを追加するまでは問題なく見えました:別の問題のために、その横にある画像リンクにインライン化されているので、表示属性と関係があると思います..何かアイデアはありますか? 私は過去8時間、これを理解しようとしてきました。

#header {
 background: url(../Images/header_bkg.png) repeat-x;
 width: 800px;
 height: 125px;
 position: relative;
}
#header ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 float: right;
}
#header li {
 float: left;
 padding: 0 6px 0 0;
 margin: 0;
}
#header a, #header a:visited {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: .7em;
 color: #333333;
 text-decoration: none;
 padding: 2px;
 display: block;
}
#header a:hover {
 font-size: .7em;
 color: #FFFFFF;
 background: #DCAD33;
 text-decoration: none;
 display: block;
}

<div id="header">
<img src="../Images/right_header_bar.png" style="float:right" />
<a href="../index.html" style="background:none; display: inline"><img src="../Images/Scofield_logo.png" style="float:left; padding: 0 0 0 20px" /></a>
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../Portfolio/portfolio.aspx">PORTFOLIO</a></li>
<li><a href="../Unique/ShipReady.aspx">RARITIES</a></li>
<li><a href="../custom.html">CUSTOM</a></li>
<li><a href="../trade.html">TRADE</a></li>
<li><a href="../Company.html">COMPANY</a></li>
<li><a href="../press.html">PRESS</a></li>
<li><a href="http://scofieldhistoriclighting.blogspot.com/" target="_blank">BLOG</a></li>
<li><a href="../Contact.html">CONTACT</a></li>
</ul>
</div>
4

5 に答える 5

2

フロートをクリアし、改行しないスペースを追加することで、この問題を修正しました...

まず、CSS ファイルで、次を <br />使用して作成しました。

#clear_floats {clear:both;}

次に、私のコードで、新しいフロート要素の直前に:

<div id="clear_floats">&nbsp;</div>

私のために働いた。お役に立てれば。

于 2012-11-26T17:28:42.290 に答える
0

それが彼が遭遇したものだとは思いません。同様の問題でこの投稿を見つけました。

たとえば float:right を取り、それを理論的に次の div の上に配置すると、それらは並べて配置する必要があります。これらの div の両方に h1 タグまたは何かを追加すると、firefox で float:right div の上に二重のパディングまたは余分なパディングがあることがわかります。これは、マージンとパディングをゼロに設定しても存在します。

例えば

< div style="float:right:margin:0;padding:0;width:280px;">
< h1>Head Right< / h1>
< /div>

< div style="margin:0;padding:0;width:300;">
< h1>Head Left< /h1>
< /div>

フローティングされていないdivの周りに境界線を追加して（私の例を残して）、それを1pxの白一色に設定して、視覚的に見えないようにし、余分なスペースを無効にすることができるのは奇妙なことです....なぜそこにあるのかわかりません. 左のフローティングされていないdivに幅を追加しようとしましたが、それでもスペースがありました。

于 2009-12-08T20:43:47.390 に答える
0

上記のコードを考えると、私はそれを見ません。より完全なテストケース？

一般に、フロート コンテンツとインライン フロー コンテンツを混在させる場合、右フロート コンテンツをフロー コンテンツの前に配置する必要があります。そうしないと、現在書いているテキスト行の下の次のテキスト行にジャンプする傾向があります。ただし、これは Firefox よりも IE に悪影響を及ぼします。

于 2009-12-08T04:52:19.097 に答える
0

これらすべてのブラウザーが同じように見えるようにするには、2 つの変更を加える必要がありました。

body
{
    margin: 8px;
}

これにより、ブラウザーのマージンが調整されました。各ブラウザーには独自のデフォルトのマージンがあり、コーディングを開始する前に事前にリセットする必要があります。コードの残りの部分がないため、これが問題になる可能性があります。

また、表示の代わりに: インライン

 <a href="../index.html" style="background: none; float: left">
于 2009-12-08T21:22:22.990 に答える
0

私が抱えていた問題を解決しました。それはあなたの問題を解決するかもしれません。横に並んだ div の両方に同じ h1 タグが付いていても、右のフロートの上部に余分なスペースがありました。それを解決するために、フロートにあったh1にゼロのトップパディングとゼロのトップマージンを追加しただけで、フロートされていない左のh1と同じようにトップでフラッシュされました。

おそらく、UL または LI にゼロ パディングとマージンを追加すると、問題が解決します。

于 2009-12-08T21:05:58.547 に答える