Плавающий и очистка в IE7 - PullRequest
Новая
       11

Плавающий и очистка в IE7

2 голосов
/ 17 февраля 2012

В настоящее время я пытаюсь реализовать сайт HTML 5.На одной из страниц II есть следующая 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 очищается, как и ожидалось, но следующие элементы списка не очищают предыдущую строку.

Это потому, что я пытаюсь использовать HTML5 в IE7 или мне чего-то не хватает в моем 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 может сломаться

1 Ответ

1 голос
/ 17 февраля 2012

Редактировать: удалены старые лишние вещи

Вариант 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>
...