2013-07-15 1 views
0

Я заменил один из моих пунктов меню изображением, и я написал его с помощью кода ниже. Он отлично выглядит в Firefox, Chrome, Safari и Opera, но в IE он, похоже, игнорирует относительное позиционирование.Изображение как пункт меню Wordpress неправильно помещено в IE

li#menu-item-19 a { 
    display: block; 
    background-image: url('images/logo.png'); 
    background-repeat: no-repeat; 
    width: 124px; 
    height: 120px; 
    text-indent: -9000px; 
    margin-right: -42.5px; 
    margin-left: -42.5px; 
    position: relative; 
    top: -31px; 
    margin-top: -31px; 
    z-index: 1; 
} 

Я con't показать весь сайт, как это не живут, но я имею установку более простой вариант его, где я был в состоянии воспроизвести проблему.

http://labs.comule.com/

Спасибо :)

ответ

0

это ошибка из-за инлайн-блока, который вы использовали на своем сайте ....

попробовать это

Добавить DOCTYPE в свой HTML,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Это работает для меня после того, как я добавил это.

+0

Спасибо за ваши усилия, но это не сработало для меня :( BTW Я нахожусь на IE9. – user2582321

+0

Эй, я только что нашел ответ с этого сайта http://robertnyman.com/2010/02/24/css -display-рядный блок-почему-это камни-и-почему-это отстой / – user2582321

0

Этот сайт получил меня, что я объяснил ниже: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Так в основном то, что я сделал добавить вертикальное выравнивание: сверху; к элементу li, тогда я удалил margin-top: -31px; из li # menu-item-19 a.

Я надеюсь, что это поможет другим людям!

Смежные вопросы