1

インライン ブロック プロパティを使用して div を積み重ねた Web ページがあります。ただし、Firefox では 2 つの div の間にのみ余分なスペースが追加されます。デザインは Safari と Chrome で一貫しています。

これがそのためのサンプルフィドルです。

#main {
    display: block;
}
#sub11, #sub12, #sub21, #sub22,  #sub31, #sub32 {
    display: inline-block;
    background:red;
    padding:0;
    //margin-right:-4px;
    margin-top:3px;
    margin-bottom:3px;
}

Firefox は、ABC と GHI が TRY の後に続く他の行と一致する一方で、 webGHIと行の間に余分なスペースを追加します。TRY

4

5 に答える 5

6

コード：

 display: inline-block;

スペースを表示します。連続して表示するには、フロートを追加する必要があります。

追加してみてください：

float:left;

あなたの #sub11 などに..

于 2013-05-14T13:29:00.170 に答える
1

私はこの質問を何十回も見てきましたが、これに関するcss-tricksに関する広範な記事があります。この問題は、display: inline-block を使用する場合に発生します。これは、通常は段落のスペース要素であり、現在はオブジェクトをインライン化するために一般的に使用されています。最良の修正は、css にこの -4 margin-left を追加することであり、それを修正する必要があります。（もちろん汚い）。

#sub11, #sub12, #sub21, #sub22 {
    display: inline-block;
    font-size: 0;
    margin-left: -4px;
 }
于 2013-05-14T13:32:08.653 に答える
1

inline-block は要素間の空白を尊重します。最も簡単な方法は、インライン要素の間にコメント タグを追加することです

http://jsfiddle.net/YuMuC/1/

<div id="main">
    <div id="sub1">
        <div id="sub11">
            <div><h4>ABC</h4></div>
            <div>123</div>
        </div><!--
        --><div id="sub12">
            <div><h4>DEF</h4></div>
            <div>456</div>
        </div>
    </div>
   <div id="sub2">
        <div id="sub21">
            <div><h4>GHI</h4></div>
            <div>745</div>
        </div><!--
        --><div id="sub22">
            <div><h4>JKL</h4></div>
            <div>987</div>
        </div>
    </div>

</div>
于 2013-05-14T13:34:12.473 に答える
0

これは実際に意図したとおりに機能しています。表示される要素inline-blockはテキストの流れに沿って表示されるため、マークアップ内のスペースは出力対象と見なされます。

マークアップ内の空白をコメント アウトするか、このようにまとめて削除することで、これを解決します。

明らかに先に進んで、代わりに asblockおよびthey を表示することもできfloatます。

于 2013-05-14T17:44:19.427 に答える
0

その1行専用に次のcss修正を使用しました

@-moz-document url-prefix() {
    #myRowID {margin-top:-5px;}
}

それは私の奇妙な問題を解決します。

于 2013-05-14T16:22:19.863 に答える