Internet Explorer не отображает изображение

Question

У меня проблема с моим сайтом, логотип Yellow Butterfly не отображается в Internet Explorer, а работает в Chrome и других браузерах.

Я даже не знаю, где проблема, поэтому я ничего не мог найти.

Если вам нужна дополнительная информация, скажите мне; вот Website (чтобы открыть проблему с).

#logo 
{ 
    z-index:2333; 
    position:absolute; 
    width:70px; 
    height:70px; 
    margin-left:-375px; 
    margin-top:-24px; 
} 

Извините за мой плохой английский, это не мой родной язык.

Answer 1

Ваше позиционирование беспорядок. Вы указываете логотип absolute, но не указываете ни одно из свойств позиционирования (слева/сверху/справа/снизу) - это делает результирующее положение вашего изображения неопределенным стандартами CSS. Chrome/Firefox по умолчанию - left:50%, в этом случае IE - left:0.

Сделайте это явным путем, добавив left:50% в ваше правило CSS для #logo, и изображение снова появится в IE.

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

Answer 2

Эта проблема представляет собой размещение по умолчанию абсолютно позиционированного элемента внутри элемента с использованием атрибута align, такого как <div align='center'>...</div>. Chrome позволяет атрибуту align центрировать абсолютно позиционированный элемент, где Internet Explorer 11 этого не делает.

После проверки в процессе развития версии Internet Explorer с помощью http://remote.modern.ie, он появится в будущих версиях Internet Explorer будет обрабатывать это таким же образом, Chrome делает, что делает следующее решение соответствующей только для обратной совместимости.

Примените следующие изменения для решения этой проблемы:

div#wrapper { 
    width: 768px; 
    margin: 0 auto; 
} 

Устанавливая width: 768px на #wrapper и margin: 0 auto мы берем лучший подход к центрированию макета, а также позиционирование aboslutely позиционирования детям.

#logo { 
    /* margin-left: -375 */ 
} 

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

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

#logo { 
    left: 0; 
    top: 187px; 
} 

Вот переключающий резюме от F12 Developer Tools Internet Explorer, которые показывают диф: