Плавающие неприятности на IE6 и IE7 - PullRequest
Новая
       11

Плавающие неприятности на IE6 и IE7

0 голосов
/ 23 марта 2010

Заголовок подраздела моего сайта состоит из 4 делений, расположенных вертикально. Пятый элемент div, содержащий изображение, расположен над этими 4 элементами div, немного дальше от правой границы. Этот макет хорошо работает в Firefox, IE8, Chrome и других браузерах, но в IE7 и IE6 div не перемещается по другим div, мешая моему макету. Как я могу это исправить?

HTML так прост: 

<div class="inter_auth">
  <div class="inter_photo">
    <img name="" src="{{ uri options="image 1" }}" width="100" height="112" border="0" />
  </div>
  <div class="other_div1">
  </div>
  <div class="other_div2">
  </div>
  <div class="other_div3">
  </div>
  <div class="other_div4">
  </div>
</div>

Контейнер CSS это: 

.inter_auth { 
  width:315px; 
  background:#ffffff; 
  font-family: Verdana, Geneva, sans-serif; 
  font-size: 10px; 
  text-align:left; 
  min-height:1px;
  overflow:hidden;
  zoom:1; }

Изображение CSS это: 

.inter_photo { 
  position:relative; 
  float:right; 
  margin:2px; 
  top:-2px; 
  left: -15px; 
  background:#899ca2; 
 *background-image: url(transparent.gif); }

1 Ответ

0 голосов
/ 13 августа 2013

Вместо этого вы можете попытаться расположить элементы абсолютно. Ваша обертка .inter_auth должна располагаться относительно, а дочерние элементы div могут располагаться абсолютно внутри родительского элемента div. Вы должны быть в состоянии выровнять их точно, используя свойства top, left, bottom и right. Вот краткое руководство по по позиционированию. Проверьте часть внизу о перекрывающихся элементах.

...