在IE7中浮动和清除 [英] Floating and clearing in IE7
本文介绍了在IE7中浮动和清除的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
目前我正在尝试实现一个HTML 5网站。在其中一个网页上，我有以下HTML结构
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>
随附的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;
}
（颜色显然只是为了演示目的:)）
(the colours are obviously just for demonstration purposes :) )
这种布局在IE8，Chrome，Firefox，Safari和Opera都可以正常工作。 .rowStart列表项被推送到下一行，并且所有以下列表项目的顶部排列顺序与第一个列表项目一样，无论所有列表项目是否具有相同的高度。
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.
但是在IE7中，布局打破了。 .rowStart列表项本身按预期清除，但以下列表项不会清除上一行。
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.
这是因为我想在IE7中使用HTML5，还是在我的CSS中缺少一些东西？
Is this because I'm trying to use HTML5 in IE7 or is there something I'm missing in my CSS?
我不担心IE6的兼容性。
I'm not worried about IE6 compatibility.
编辑：不知道这是否相关，但我的HTML基于HTML5样板，并使用modernizr.js
Don't know if this is relevant, but I'm basing the HTML on the HTML5 boilerplate, and am using modernizr.js
编辑2：这是完整的文档结构（略过实际列表，就像你已经看到的）
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>© 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中断的内容
EDIT 3: Updated the list item contents to something more likely to cause IE7 to break
推荐答案
编辑：删除旧的多余内容
removed old superfluous stuff
选项1， / p>
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>
选项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中浮动和清除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
