Floating and clearing in IE7

2019-07-20 18:41发布

站内问答 / HTML/CSS
1640 1 2

Currently I'm trying to implement a HTML 5 site. On one of the pages I I have the following HTML structure

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

The accompanying CSS is as follows: 

.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;
}

(the colours are obviously just for demonstration purposes :) )

This layout works fine in IE8, and in Chrome, Firefox, Safari and Opera. The .rowStart list items get pushed to the next row, and all the following list items have their tops lining up fine with the first one as intended, regardless of whether all teh list items are the same height or not.

Howevern in IE7, the layout breaks quite badly. The .rowStart list item itself gets cleared as expected, but the following list items don't appear to clear the previous row.

Is this because I'm trying to use HTML5 in IE7 or is there something I'm missing in my CSS?

I'm not worried about IE6 compatibility.

EDIT: Don't know if this is relevant, but I'm basing the HTML on the HTML5 boilerplate, and am using modernizr.js

EDIT 2: Here's the full document structure (ommitting the actual list, as you've seen that already)

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

EDIT 3: Updated the list item contents to something more likely to cause IE7 to break

1条回答
等我变得足够好
2楼-- · 2019-07-20 19:19

Edit: removed old superfluous stuff

Option 1, this css worked:

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

Option 2: Nested Lists

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)