2
現在、私はHTML 5サイトを実装しようとしています。 IIは、次のHTML構造IE7でのフローティングとクリア
<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>
を持っているページの1以下のように付属の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互換性について心配していません。
EDIT：これは関連性がある場合はわからないが、私は、HTML5の決まり文句にHTMLを基づかだ、とmodernizr.js
EDIT 2使用しています：ここでは、実際のリストをommitting完全な文書構造は、（だがあなたは）そのすでに見てきたように、
<!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>
はEDIT 3：IE7が破損させる可能性が高いものにリスト項目の内容を更新しました
指定されたコードにHTML5はありませんか？ – BoltClock
@BoltClock与えられたコードは難しい原因となっているリストに過ぎません。私はちょうどリストのためにHTML文書全体を投稿したくなかった。参考までに、セクションタグに埋め込まれています。セクションタグは記事タグにラップされています。 – GordonM
私はフィドルを作りました。どこにでも同じように見えます。 http://jsfiddle.net/RGWy4/ –