Работа с простым плавающим текстом вокруг изображения, но в IE7 это не очень хорошо. Текст помещается под изображением, как если бы он не плавал.IE7 плавающий текст вокруг изображения внутри плавающего div
Из того, что я прочитал, причиной этого может быть то, что изображение и текст находятся в пределах плавающей (и фиксированной ширины/высоты) div, которая предположительно вызывает «hasLayout» для содержащего div. Я искал четкое обходное решение, но пока не найдено.
В худшем случае я могу использовать jQuery, поскольку я уже использую это на странице, но я бы предпочел решить это с помощью CSS.
Here is a fiddle, хорошо работает в хороших браузерах, но должен быть неудачным в IE7.
Хорошо (Firefox, Safari, Chrome, Opera, IE8 +):
Bad (IE7):
HTML:
<html>
<body>
<div id="box_section">
<div id="container1">
<div id="container2">
<div class="box">
<img src="http://c69282.r82.cf3.rackcdn.com/robot.jpg"/>
<p>Lorem ipsum etc etc whatever.</p>
</div>
<div class="box">
<img src="http://c69282.r82.cf3.rackcdn.com/pushing278.jpg"/>
<p>Lorem ipsum etc etc whatever.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS :
/* Container for floating boxes */
#box_section
{
height: 300px; /* Fixed height and width */
width: 984px;
margin-top: 35px;
padding: 0;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
/* Containers used to centre floated items independent of number */
/* In real webpage there can be any number of boxes. */
#container1
{
padding: 0;
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#container2
{
clear:left;
float:left;
padding:0;
position:relative;
left:50%;
}
/* The box. OMG. */
.box
{
float: left;
position:relative;
right:50%;
height: 190px; /* Note fixed height and width */
width: 350px;
border-style: solid;
border-color: #ebead4;
border-width: 1px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
margin: 20px;
overflow: hidden;
}
/* Goal is to float text around image. Note that images have fixed width/height.
Images snatched from random website for demonstration purposes. */
.box img
{
float: left;
margin-right: 15px;
height: 180px;
width: 200px;
border-style: solid;
border-radius: 5px;
border-color: #eeeeff;
border-width: 1px;
}
Обратите внимание, что решение для содержащего div должно быть достаточно гибким, так как может быть любое количество этих полей, и их нужно поместить в центр (jQuery используется для отображения только одной строки за раз) , Коробки также могут быть любой из 4 различных фиксированных ширины.
Также это осложняется тем, что изображение может быть одной из двух ширины (2 разных класса CSS) или вообще не должно быть. Я думал о том, чтобы сделать положение изображения абсолютным и сделать это с полями, но это, следовательно, терпит неудачу.
Работает в IE7 для меня странно. Я бы предложил удалить позицию: relative на .box asit не требуется, а также рассмотреть вопрос о добавлении файла сброса css или в leeast, объявляющем «* {margin: 0; padding: 0;}» –
О, извините, У меня есть «* {margin: 0; padding: 0;}». Об относительной позиции, то есть просто остатке от меня, пытающегося исправить это с абсолютным позиционированием изображения. Сожалею. Не уверен, почему он работает для вас в IE7, но я не пробовал скрипку в IE7, поскольку режим совместимости для IE9 не позволяет мне (и это самый старый IE, который у меня есть). – Oystein
У вас есть действительный doctype, объявленный на вашей странице? –