IE плавает вправо - извините, я просто не могу понять доступные решения - PullRequest
0 голосов
/ 06 июня 2009

У меня есть родительский 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 перемещает изображение за пределы RHS родительского div (см. http://horticulture127.massey.ac.nz/ie7view.png), тогда как FF и Safari отображают плавающий и упакованный текст в пределах границ родительского div (черные вертикальные линии - LHS / RHS). границы родительского дел.

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

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

(imgposr - это не элемент CSS - это селектор для некоторых jquery)

Ответы [ 3 ]

0 голосов
/ 07 июня 2009

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

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

Когда я добавляю ширину в 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>

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

0 голосов
/ 14 октября 2009

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

0 голосов
/ 06 июня 2009

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

.imgr {
    overflow:auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...