div清除之后IE中额外的垂直空间

Question

div清除之后IE中额外的垂直空间

laj*_*jos 8 html internet-explorer clear

我创建了一个简单的div网格,通过左浮动它们和一个空的div,每行的末尾有一个清除.

这在Firefox中运行良好,但在IE中我在行之间获得额外的垂直空间.我试图应用"clearfix"方法,但我一定做错了.

为什么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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gre*_*reg 14

IE 对于空s 有点滑稽<div> - 它喜欢给它们一行文本的高度.

如果更改.clear为此值,它将缩小为1像素:

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

Run Code Online (Sandbox Code Playgroud)

放置背景颜色以查看正在发生的事情

归档时间：	16 年，11 月前
查看次数：	27211 次
最近记录：	14 年，8 月前