Question

目前我正在尝试实施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中断的内容

Answer 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>

在IE7中浮动和清除

1 个答案: