IE 7 DIV смещается вправо - PullRequest
Новая
       8

IE 7 DIV смещается вправо

0 голосов
/ 14 июня 2011

В IE 7 мой div слишком сильно сдвигается вправо, в то время как в Google Chrome они работают правильно Сначала я думал, что это z-индекс, но потом выяснилось, что это абсолютная позиция Кто-нибудь сталкивался с исправлением, это будет высоко ценится!

Скриншоты:

chrome

IE7 http://i56.tinypic.com/2vjsqwz.png

Вот CSS: 

#rightinfohomecontainer {
height: 300px;
width: 400px;
margin-top:160px;
    float: left;
z-index: 3;
overflow: hidden;
position: relative;

#rightinfoboxhome {
float: left;
height: 100px;
width: 400px;
z-index: 2;
overflow: visible;
position: absolute;
margin-left: 0px;

#rightinfoboxtext {

float: left;
height: 245px;
width: 344px;
z-index: 1;
margin-top: 60px;
padding-left: 50px;
overflow: hidden;
padding-right: 6px;
padding-top: 2px;
margin-left: 0px;
position: absolute;
}
#rightcolumn {
    float: left;
    height: 600px;
    width: 450px;
}

HTML 

<div id="rightcolumn">
<div id="rightinfohomecontainer">
<div id="rightinfoboxhome"><img src="images/aboutus.png" /> </div>
<div id="rightinfoboxtext"></div>
</div></div>

Ответы [ 3 ]

1 голос
/ 14 июня 2011

Не видя реальной страницы, будет очень трудно диагностировать.Вероятно, это как-то связано с CSS левого изображения, но это не входит в ваш вопрос.Ваша абсолютная позиция в основном бессмысленна, так как этот div в любом случае будет уже на 0px 0px от его родителя.

Я думаю, это не проблема IE7, а полная некорректная / плохая проблема CSS.Создайте jsfiddle , и я могу посмотреть на него подробнее.

Для начала, вам, вероятно, следует попробовать использовать CSS Reset, как показано ниже, или, по крайней мере, попытаться поместить его в верхнюю частьВаша основная таблица стилей CSS: 

* {
    margin: 0px;
    padding: 0px;
}

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

Сброс CSS

Редактировать:

  • Не использовать таблицы (никогда -но особенно для вашего меню)
  • Нет причин устанавливать переполнение: видимый;это значение по умолчанию
  • . Старайтесь не устанавливать абсолютно все для плавания, например, нужно ли показывать слайдшоу?Если вам удастся обойтись только с плавающими колонками, вам будет лучше, и, надеюсь, вам будет яснее понять, в чем проблема.

Общая проблема, приводящая к сбою IE7: не уверен, если честно,Разрежьте страницу до минимума - 2 колонки.Получите CSS, работающий только с этими двумя, используя для этого как можно меньше CSS.Затем, когда вы работаете в IE7, вы можете медленно добавлять такие вещи, как изображения, меню, и т. Д. И т. Д. Проверяйте после каждого добавления, чтобы убедиться, что что-то не так.

Извините, я не могудополнительной помощи, но - это способ сделать это.Если вы полностью удалили его, но он все еще не работает, отправьте ссылку на этот jsfiddle.

0 голосов
/ 14 июня 2011

Указанный вами CSS недействителен, ему не хватает }. Посмотрите, не хватает ли их вашего оригинального CSS.

Вы объявляете некоторый div в absolute , но вы также делаете их float . Я думаю, что это плохая идея.

Вы объявляете некоторую ширину div + margin + padding. Это может быть проблема .

Наконец, попробуйте это: 

#rightinfohomecontainer {
    height: 300px;
    width: 400px;
    margin-top:160px;
        float: left;
    z-index: 3;
    overflow: hidden;
    position: relative;
    border:2px solid gray;
    background:#ddd;
}
#rightinfoboxhome {
    height: 100px;
    width: 400px;
    z-index: 2;
    overflow: visible;
    position: absolute;
    margin-left: 0px;
    border:2px solid blue;
    background:lightblue;
}

#rightinfoboxtext {
    height: 245px;
    width:100%;
    z-index: 1;
    margin-top: 60px;
    padding-left: 50px;
    overflow: hidden;
    padding-right: 6px;
    padding-top: 2px;
    margin-left: 0px;
    position: absolute;
    border:2px dotted green;
    background:lightgreen;
}

#rightcolumn {
    float: left;
    height: 600px;
    width: 450px;
    border:2px solid red;
    background:#cc55cc;
}

Я удалил некоторые стили, изменил ширину в 1 div (до 100%) и добавил немного кода для тестирования в моем браузере (а именно, границы и фона (для проблемы z-index)).

Сначала вы должны переосмыслить стиль ваших стилей с помощью CSS, возможно, есть другая часть, которую вы можете удалить (например, #rightinfoboxhome margin-left).

0 голосов
/ 14 июня 2011

Некоторые из этого кода не имеют смысла.

  1. У вас есть абсолютное позиционирование по элементам div, которые, по-видимому, не имеют значений сверху, снизу, слева или справа.Absolute будет использовать valeus по умолчанию для верхнего и левого, если вы не установите их самостоятельно.

  2. У вас есть значения z-index для div, которые не находятся на одном уровне друг с другом.

  3. Div, rightinfohomecontainer уже, чем некоторые из diovs, которые он содержит.Это преднамеренно?

для отладки, попробуйте использовать: 

#rightinfohomecontainer,
#rightinfohomecontainer div{
border: 1px solid blue;
}

Это может показать вам, какой div подталкивает вещи и требует внимания.

...