как выровнять поплавки в IE6 - PullRequest
Новая
       16

как выровнять поплавки в IE6

2 голосов
/ 29 мая 2010

У меня проблемы с отображением плавающих абзацев и изображений в IE6. Не было проблем с отображением их в Opera и Firefox. У меня есть три элемента внутри контейнера. У каждого элемента есть свой абзац, а изображение перемещается влево или вправо. Чтобы получить желаемый макет, я установил отрицательные поля в большинстве абзацев и изображений.

Вот как я выровнял поплавки:

---- CSS код для контейнера ----- 

.container {
clear:both;
background:url(images/content_bg.png) repeat-x scroll 0 0 transparent;
width:850px;
height:750px;
overflow:hidden; 
margin:0 auto;
}

----- CSS-код для первого div ----- 

.row1 {
float:left;
width:790px;
height:460px;
margin:5px 0 0 40px;
}

.pic1 {
float:right;
height:460px;
width:382px;
margin:-100px -50px 0 -60px;
}

h2, p {
font-family:Arial, Helvetica, sans-serif;
}

.row1 p {
font-size:12px;
text-indent:20px;
font-weight:bold;
text-align:justify;
margin:-10px -25px 0 0;
position:relative;
}

----------- код для второго div ------------- 

.ro2 {
float:left;
width:790px;
height:234px;
margin:-185px 0 0 28px;
position:relative;
}

.row2 p {
float:right;
font-size:12px;
font-weight:bold;
text-align:justify;
text-indent:20px;
margin:-195px 258px 0 175px;
position:relative;
}

.pic2 {
float:left;
}

--------- код для 3-го div --------------- 

.row3 {
float:left;
width:790px;
height:203px;
margin:-10px 0 0 40px;
position:relative;
}


.row3 p {
float:left;
font-size:12px;
font-weight:bold;
text-indent:20px;
text-align:justify;
margin:-180px 265px 0 10px;
position:relative;
}

.pic3 {
float:right;
}

Высота элементов div (от .row1 до .row3) зависит от высоты изображений, так что div может содержать и абзацы, и изображения. Похоже, что абзацы находятся далеко от изображений при просмотре в IE6. Некоторые абзацы перекрываются с другими изображениями.

Ответы [ 2 ]

1 голос
/ 29 мая 2010

IE6 не поддерживается и содержит много "ошибок" ... вы должны разрабатывать для IE7 и выше ...

относительно вашего css:

вы используете положение: относительное; но не устанавливая никаких координат, IE6 не нравится, попробуйте удалить его!

Вы не показываете, где применяются все классы, некоторые теги HTML не подходят для полей в IE6, попробуйте вместо этого использовать отступы.

хороший способ хорошо работать в IE6 - использовать таблицу вместо div, но div работает просто так: 

<div class="container" style="width:800px;">

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

</div>

Это пример, просто чтобы проиллюстрировать, что для IE6 вы должны обернуть текст и изображения внутри div, и этот div - тот, который должен плавать ...

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

0 голосов
/ 29 мая 2010

В IE6 есть ошибка, влияющая на значения с плавающей точкой, из-за которой поля удваивают свое действительное значение. Держу пари, что это проблема, поскольку у вас установлены поля и сказано: «Похоже, что абзацы находятся далеко от изображений при просмотре в IE6. Некоторые абзацы перекрываются с другими изображениями».

К счастью, это легко исправить - каждый раз, когда вы устанавливаете число с плавающей запятой, также задайте «display: inline». Если это не повлияет на другие браузеры и не позволит IE 6 удвоить поля.

См. статью о позиционировании на этом . Обратите внимание, что вы должны просмотреть страницу в IE6, чтобы примеры имели смысл.

...