IE7 Image float bug

Question

http://wilwaldon.com/ie7bug/test1.php

Обратите внимание на средний столбец, изображения должны плавать влево, они есть в любом браузере, кроме IE7.Я никогда раньше не сталкивался с этой проблемой и понятия не имею, что с ней происходит.

Буду признателен за любые идеи, которые укажут мне правильное направление.

ОБНОВЛЕНИЕ

Если удалить ширину: 330px#contentleft p прожекторы выстраиваются идеально, но я столкнулся с новой проблемой.Теперь левый столбец оборачивает правый столбец.Ughh!IE7 !!!

Answer 1

Я думаю, это связано с "width: 330px", которое вы даете элементам

в центре внимания. IE7 обрабатывает их с такой шириной, поэтому очищает изображение ...

Возможно, вам придется поиграть с шириной для прожекторов, содержащих изображения, и прожекторов, не содержащих изображений.

Answer 2

Из вашего вопроса не ясно, чего именно вы пытаетесь достичь, чтобы поместить изображение слева от заголовка и абзаца или только слева от абзаца.Не могли бы вы приложить изображения, показывающие желаемый результат и то, что вы считаете ошибкой.

Answer 3

Вы, похоже, используете display: table-cell, чтобы текст появлялся в столбце рядом с плавающим изображением, а не оборачивался вокруг него.

Вы должны использовать overflow для достижения этого эффекта :

.spotlight1 p { 
    color: #333333;
    font-size: 12px;
    overflow: hidden;
}

Вам также придется избавиться от ширины в этих абзацах, которую они теперь получают из #contentleft p.

Но вы можете использовать один и тот же прием для двух крайних левых столбцов, если вы поместите #inner2right2 div прямо перед #inner2left div. Затем вы можете использовать переполнение в этом левом столбце, чтобы они оставались рядом друг с другом. Таким образом, вы можете избавиться от ширины, которую вы устанавливаете на #contentleft p.

Это будет работать и в IE7.

Я думаю, что это будет работать и в IE6, если вы дадите те же блоки " layout ". Самый простой способ сделать это, добавив zoom: 1.

Answer 4

Мне не нравится это делать, но это способ добиться эффекта с IE7 с помощью jQuery:

    $(function() {

        $(".spotlight .item img").each(function() {

            $(this).css("marginBottom", $(this).parent().height() - $(this).height());

        });

    });

См. http://test.sua.umn.edu/test.kamran/ie7float.html

Answer 5

Скопируйте, вставьте это в пустой HTML и посмотрите, как это работает. Следует исправить все ваши проблемы. Исправьте ширину .box, чтобы она соответствовала необходимой ширине. Это также работает, если div.left пуст и у вас нет изображения там.

<div class="box">
    <div class="left">
        <img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
    </div>
    <div class="right">
        <h2>Heading</h2>
        <p>Paragraph text</p>
    </div>
</div>



<style>
    .box {
        width: 600px;
        background: red;
        }
    .left {
        float: left;
        width: auto;
        }
</style>