div clearの後のIEの余分な垂直スペース

StackOverflow https://stackoverflow.com/questions/473143

  •  19-08-2019
  •  | 
  •  

質問

divの単純なグリッドを作成しました。divをフローティング状態のままにし、空のdivを各行の最後にクリアします。

これはFirefoxでは正常に機能しますが、IEでは行間に余分な垂直方向のスペースができます。 <！> quot; clearfix <！> quot;を適用しようとしました。メソッドが、私は何か間違っている必要があります。

IEが余分な垂直スペースを挿入するのはなぜですか。どうすれば削除できますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        root {
            display: block;
        }

        body {
            background: white;
        }

        .colorChip {
            position:relative;
            float: left;
            width: 20px;
            height: 20px;
            margin: 2px;
            border-style: solid;
            border-width: 1px;
            border-color: black;
        }

        .clear {
            clear: both;
        }

        .clearfix {
            display:inline-block;
        }

        .clearfix:after, .container:after {
            clear:both;
            content:".";
            display:block;
            height:0;
            visibility:hidden;
        }

        * html .clearfix {
            height:1%;
        }
        .clearfix {
            display:block;
        }

    </style>
    <!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
</style>
<![endif]-->

  </head>

  <body>
    <div class="colorChip clearfix" style="background: rgb(163,143,88)"></div>
    <div class="colorChip" style="background: rgb(190,170,113)"></div>
    <div class="colorChip" style="background: rgb(190,250,113)"></div>
    <div class="clear"></div>
    <div class="colorChip clearfix" style="background: rgb(187,170,128)"></div>
    <div class="colorChip" style="background: rgb(215,197,154)"></div>
    <div class="colorChip" style="background: rgb(243,225,181)"></div>
    <div class="clear"></div>
    <div class="colorChip clearfix" style="background: rgb(104,94,68)"></div>
    <div class="colorChip" style="background: rgb(129,118,92)"></div>
    <div class="colorChip" style="background: rgb(155,144,116)"></div>
    <div class="clear"></div>
  </body>
</html>
役に立ちましたか？

解決

IEは空の<div> sについて少し面白いです-テキストの行の高さを与えるのが好きです。

.clearをこれに変更すると、1ピクセルに縮小されます：

    .clear {
        clear: both;
        height: 1px;
        overflow: hidden;
    }

何が起こっているかを見るために背景色を付けてください

他のヒント

.clear {
    clear: both;
    height: 0px;
    overflow: hidden;
}

0pxに変更するとうまくいきます。

それなしではIE6では動作しますが、IE7では動作しません。IE7では動作しますが、IE6では高さが追加されます。このブラウザに対する私の憎しみを説明する言葉はありません。

高さ：0pxはIE 8では機能しませんでした。また、1pxの高さは必要ありませんでした。これは、divに灰色の背景を持つ1pxの白い線があり、必要ないからです。 class = <！> quot; clear <！> quotのすべてのインスタンスに特別な背景色を設定するにはdiv。行の高さを試しました：0; IE8、IE7、IE6（それより古いものは気にしません）とFF 3.6でうまく機能しました。追加の垂直スペースは追加されませんでした。

.clear {
    clear: both;
    line-height: 0;
    overflow: hidden;
}

ie8でこの問題が発生し、以下を使用しました

.clear
{
    clear:both;
    height:0;
    width:0;
    margin:0;
    padding:0;
    line-height:0;
    overflow: hidden;
    font-size:0px;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top