IE плавает вправо - извините, я просто не могу понять доступные решения

У меня есть родительский div с фиксированной шириной, внутри которого я перемещаю изображение с тегами:

<div style="width: 200px;" class="buggybox imgr" id="g0">
    <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
</div>

с расчетом на то, что текст будет обтекать изображение.

К сожалению, IE7 перемещает изображение за правую границу родительского элемента div (см. massey.ac.nz/ie7view.png), тогда как FF и Safari отображают плавающий и обернутый текст в границах родительского div (черные вертикальные линии — это границы LHS/RHS родительского div.

Как исправить эту ошибку CSS? Доступно так много информации о проблемах IE6/7 с правильными числами с плавающей запятой, что я совершенно ошеломлен и не вижу решения.

.imgr{
    float: right;
    margin: 4px 0 4px 10px;
    padding: 4px;
    clear: right;
}
* html .buggybox {height: 1%;}

(imgposr не является элементом css — это селектор для некоторого jquery)


css css-float
person TomBaine    schedule 06.06.2009    source источник
comment
Есть ли у родителя свойство height? Что это?   -  person Diodeus - James MacFarlane    schedule 06.06.2009
comment
В прошлом у меня были проблемы с кросс-браузерностью при определении float и clear в одном и том же элементе. Попробуйте добавить div перед элементом .imgr с очисткой там и удалите его из .imgr css и посмотрите   -  person Rodolfo    schedule 06.07.2012

Ответы (3)


arrow_upward
0
arrow_downward

Кажется, что-то по какой-то причине устанавливает ширину вашего «баггибокса» на 1 пиксель - это единственный способ, которым я смог получить результат, похожий на то, что вы описываете.

Если возможно, не могли бы вы попытаться опубликовать более полный фрагмент кода, в котором есть проблема? Постарайтесь сделать код максимально коротким, убрав все ненужное. У меня есть следующая настройка кода, которая, я думаю, делает то, что вы хотите.

Когда я добавляю ширину 1 пиксель в div .imgr, я получаю тот же результат, что и на картинке, которую вы предоставили (как в Firefox, так и в IE), поэтому я подозреваю, что именно в этом ваша проблема.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#parent {
    width: 600px;
    border: 1px solid black;
}

.imgr{   
    float: right;    
    margin: 4px 0 4px 10px;    
    padding: 4px;    
    clear: right;
}
</style>
</head>
<body>
<div id="parent">
    <div class="buggybox imgr" id="g0">
        <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien libero, eget interdum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rutrum interdum dui ac ultrices. Donec pulvinar feugiat nibh, sit amet rhoncus sapien consectetur quis. In orci ante, bibendum sit amet euismod eu, tristique ac erat. Donec in enim nisl. Etiam vestibulum scelerisque purus, et fringilla nibh malesuada sit amet. Praesent magna mi, egestas quis commodo a, vulputate ut sem. Nullam auctor vulputate justo, vel pharetra lectus pulvinar eget. Curabitur dignissim lectus nec ligula rutrum et pellentesque metus auctor. Sed metus diam, aliquet non malesuada vitae, tincidunt sit amet augue. Aliquam luctus posuere eros, non adipiscing ante varius sed. 
</div>
</body>
</html>

Надеюсь это поможет!

person ylebre    schedule 06.06.2009

arrow_upward
0
arrow_downward

Вам нужно добавить position:relative; к родительскому элементу.

person Josh Stodola    schedule 13.10.2009

arrow_upward
-1
arrow_downward

Вы можете попробовать следующее:

.imgr {
    overflow:auto;
}
person jao    schedule 06.06.2009
comment
Это добавит полосу прокрутки, а не то, что хочет спрашивающий. - person Paul Fisher; 06.06.2009
comment
Он не добавит полосу прокрутки, если в этом нет необходимости. Я использовал тот же подход. Другой способ исправить это — добавить float к родительскому элементу. - person jao; 06.06.2009