IE7 CSS float не работает так же, как все остальное (Webkit, IE8 / 9 и т. - PullRequest
Новая
       25

IE7 CSS float не работает так же, как все остальное (Webkit, IE8 / 9 и т.

0 голосов
/ 21 февраля 2012

Хорошо, у меня есть макет с различными вложенными элементами div.

По сути, у меня есть фоновое изображение слева с центрированной областью содержимого и правым изображением.

Мне бы хотелосьчтобы изображения были максимально приближены к содержанию, независимо от ширины страницы.Таким образом, левое изображение в этом случае плавает вправо.Я использую поля для правильного выравнивания левого изображения с левой стороной содержимого.

CSS 

.left { 
  left: 0; 
} 

.column_left { 
  width: 50%; 
  position: absolute; 
  top: 0; 
  text-align: right;
}

#leftcol { 
  margin-right: 471px;
  float:right;
}

HTML: 

<div class="left column_left" style="height: 100%; overflow: hidden; z-index: -1;">
<div id="leftcol" style="height: 100%; min-width: 471px;">
<div style="width: 770px; height: 646px; background-image: url("myimage"); background-repeat: no-repeat;"/>

Если я использую что-либо, кроме IE7, и уменьшу окно браузера, левое изображение будет правильно скрываться, начиная с левой стороны.

В IE7 содержимое div будет перекрывать изображение вместо того, чтобы переполнять изображение за пределами экрана, чтобыслева.

Как это можно исправить в IE7?

Вот рабочий пример проблемы: http://www.ottawatravellers.ca

1 Ответ

0 голосов
/ 13 января 2014

Попробуйте это в css для изображения: 

<div style="width: 770px; height: 646px; background:url("myimage") center left no-repeat;"/>
...