IE7 Clear Float Проблема - PullRequest
Новая
       15

IE7 Clear Float Проблема

0 голосов
/ 29 июля 2010

Привет, это упрощенная версия проблемы с IE7. По сути, div, следующие за очищенным div (зеленым), не ведут себя должным образом (в IE7). Он работает, как и ожидалось, в Safari, FF и т. Д. И IE8.

Есть ли у кого-нибудь советы по исправлению. Спасибо за любую помощь:) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    #wrap {width:600px;height:1000px;background:black;}
    .box {width:179px;height:180px; float:left; border-right:1px solid white;border-top:1px solid white;margin-right:20px;background:blue;}
    .clear{clear:left;}.small{height:100px}.xsmall{height:50px}.first{background:red;}.second{background:yellow;}.third{background:pink;}
    .fourth{background:green;}.fifth{background:aqua;}</style>
</head>
<body>
    <div id="wrap">
        <div class="box first"></div>
        <div class="box small second"></div>
        <div class="box xsmall third"></div>
        <div class="box clear fourth "></div>
        <div class="box fifth"></div>
        <div class="box sixth"></div>
    </div>
</body>
</html>

1 Ответ

2 голосов
/ 29 июля 2010

Вы можете ...

A) вставить прозрачный элемент «делитель» между 3-м и 4-м, что приведет к очистке: оба, занимают высоту 1px, занимают всю ширину, а затемtop: -1px на 4, 5, 6, поэтому между ними нет вертикального промежутка в 1px.

B) используйте inline-block вместо float, например: http://jsfiddle.net/gLcNm/16/

Требуется разметкаизмените, чтобы между вашими боксами не было пробелов, И хак для CSS для IE, который изначально не выполняет inline-block без повторного выделения inline для уровней блоков.

C) заставляет каждый из этих блоков div содержать "строка "div: 

<div class="row">
<box><box><box>
</div>

Затем очистите row, чтобы в нем были поля.

...