IE7中的浮动和清除答案

【问题标题】：Floating and clearing in IE7IE7中的浮动和清除
【发布时间】：2012-02-18 18:27:26
【问题描述】：

目前我正在尝试实现一个 HTML 5 网站。在其中一个页面上，我有以下 HTML 结构

<ul class="catList">
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr... Consetetur sadipscing elitr... Consetetur sadipscing elitr...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum... At vero eos et accusam et justo duo dolores et ea rebum... At vero eos et accusam et justo duo dolores et ea rebum... At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr... Consetetur sadipscing elitr...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua...</p>
  </li>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </li>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </li>
</ul>

随附的 CSS 如下：

.catList {
    overflow: hidden;
    background: sandybrown;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 1000px;
}
.catList li {
    float: left;
    width: 249px;
    margin: 0 1px 1px 0;
    background: orchid;
}
.catList li.rowStart {
    clear: both;
}

（颜色显然只是为了演示目的:)）

此布局在 IE8 以及 Chrome、Firefox、Safari 和 Opera 中运行良好。 .rowStart 列表项被推送到下一行，并且以下所有列表项的顶部都按预期与第一个列表项对齐，无论所有列表项是否具有相同的高度。

然而在 IE7 中，布局非常糟糕。 .rowStart 列表项本身按预期清除，但以下列表项似乎没有清除前一行。

这是因为我尝试在 IE7 中使用 HTML5，还是我的 CSS 中缺少某些内容？

我不担心 IE6 的兼容性。

编辑：不知道这是否相关，但我将 HTML 基于 HTML5 样板，并且正在使用modernizr.js

编辑 2：这是完整的文档结构（省略实际列表，正如您已经看到的那样）

<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" >
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
        <meta name="language" content="en" >
        <title>Title goes here</title>
        <link href="/css/html5.css" media="all" rel="stylesheet" type="text/css" >
        <link href="/css/core.css" media="all" rel="stylesheet" type="text/css" >
        <!--[if lte IE 7]> <link href="/css/ie7.css" media="all" rel="stylesheet" type="text/css" ><![endif]-->     
        <!--[if lt IE 7]> <script type="text/javascript/" src="/css/iepngfix/iepngfix_tilebg.js"></script><![endif]-->
        <script type="text/javascript" src="/js/jquery/core.js"></script>
        <script type="text/javascript" src="/js/modernizr-2.5.2.min.js"></script>
    </head>

    <body>
        <div class="siteWrap">
            <header>
                <p>Header stuff goes here</p>
                <nav class="topNav">
                    <ul class="headerLinks clearfix">
                        <li><a href="/">Home</a>
                        <li><a href="/">link 2</a>
                        <li><a href="/">link 3</a>
                        <li><a href="/">link 4</a>
                        <li><a href="/">link 5</a>
                    </ul>
                </nav>
            </header>
            <div class="main">
                <nav class="breadcrumbs">
                    <p>You are in:</p>
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li>Breadcrumb 1</li>
                    </ul>
                </nav>
                <p>Catalogue preamble goes here</p>

                <ul class="catList">
                    <!-- ommitted because it's already in the question -->
                </ul>

                <p>Catalogue postamble goes here</p>

            </div>

            <footer>
                <p class="copyright"><small>&copy; Copyright Foo Bar 2012</small></p>
                <nav class="bottomNav">
                    <ul class="footerLinks">
                        <li><a href="#" class="social twitter">Follow on Twitter</a></li>
                        <li><a href="#" class="social facebook">Follow on Facebook</a></li>
                        <li><a href="#">Stockists</a></li>
                        <li><a href="#">Contact us</a></li>
                    </ul>
                </nav>
            </footer>
        </div>
    </body>
</html>

编辑 3：将列表项内容更新为更可能导致 IE7 崩溃的内容

【问题讨论】：

我在您给定的代码中没有看到任何 HTML5？
@BoltClock 给定的代码只是导致困难的列表。我不想只为列表发布整个 HTML 文档。仅供参考，它嵌入在 section 标签中，而 section 标签又被包裹在 article 标签中。
我创建了一个小提琴，它在我看来到处都是一样的。 jsfiddle.net/RGWy4
@BoltClock 将完整标记添加到问题中作为编辑
@AlexMorales 我摆弄你的小提琴，发现它会根据每个单独的列表项中有多少内容（如果它们都具有或多或少相同的内容长度，它可以正常工作）正确呈现或以其他方式呈现但如果内容长度有很多变化，则 IE7 中的布局会中断）

标签： css html internet-explorer-7 css-float

【解决方案1】：

编辑：删除旧的多余的东西

选项 1，此 CSS 有效：

.catList {
overflow: hidden;
background: sandybrown;
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
overflow:auto;
}
.catList li {
min-height:1px;
float: left;
width: 249px;
margin: 0 1px 0px 0;
background: orchid;
min-height:1px;
}
.catList li.rowStart {
clear: both; 
}

.catList li.spacer{
font-size:1px;
line-height:1px;
text-height:1px;
height:1px;
margin:0;
padding:0;
width:1000px;
background:#000;
float:none;
clear:both;
}

html:

<ul class="catList">
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="spacer"></li>
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">Bobilicius Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
  </li>
  <li class="cat rowStart">
    <h4>Title</h4>
    <p class="shortDesc">Consetetur sadipscing elitr</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua</p>
  </li>
  <li class="cat">
    <h4>Title</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </li>
  <li class="cat rowEnd">
    <h4>Dozer Bags</h4>
    <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </li>
</ul>

选项 2：嵌套列表

CSS：

.catList {
    background: sandybrown;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 1000px;
}
.catList li.catRow li {
    float: left;
    width: 249px;
    margin: 0 1px 1px 0;
    background: orchid;
    display:inline-block;
    }

.catList li.catRow {
    float:left;
    width:1000px;
    clear:left;
    min-height:1px;
}

html:

<ul class="catList">
    <li class="catRow">
        <ul>
            <li class="cat">
                <h4>Title</h4>
                <p class="shortDesc">Consetetur sadipscing elitr...</p>
            </li>
            <li class="cat">
                <h4>Title</h4>
                <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...</p>
            </li>
            <li class="cat">
                <h4>Title</h4>
                <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
            </li>
            <li class="cat">
                <h4>Dozer Bags</h4>
                <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
            </li>
        </ul>
    </li>
    <li class="catRow">
        <ul>
            <li class="cat">
                <h4>Title</h4>
                <p class="shortDesc">Consetetur sadipscing elitr...</p>
            </li>
            <li class="cat">
                <h4>Title</h4>
                <p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p>
            </li>
            <li class="cat">
                <h4>Title</h4>
                <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
            </li>
            <li class="cat">
                <h4>Dozer Bags</h4>
                <p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
            </li>
        </ul>
    </li>
</ul>

【讨论】：

抱歉，不开心。感谢您的回复（仅供参考，我是运行旧版本 IE 的 Windows Virtual PC，我发现 IE9 中的兼容模式在模拟它们时不是很可靠）
啊，等一下，更改内容长度，模拟的 ie7 确实显示了问题（可能在您的示例中编辑）。现在正在寻找适合您的选项。
我已经在你的行之间的间隔 li 中添加了（暂时只应用于第一行），然后为间隔应用了 css
我同意不必要的标记并不理想，但这是我可以让您的想法在 ie7 中工作的唯一方法。我记得 ie7 在新的时候也有类似的问题。
我还添加了一个嵌套列表选项 - 比分隔符在语义上更正确，但标记也更多。我认为找到纯 css 版本的机会似乎很小，因为这似乎是一个真正的 ie7 浮动错误。