Встроенный блок не работает в Internet Explorer 7, 6

У меня есть этот код CSS с inline-block, Может кто-нибудь сказать мне, как заставить его работать в Internet Explorer 6 и 7. Есть идеи? Может я что то не так делаю? Спасибо!

#signup {
   color:#FFF;
   border-bottom:solid 1px #444;
   text-transform:uppercase;
   text-align:center;
}
#signup #left {
   display: inline-block
}
#signup #right {
   background-image:url(images/signup.jpg);
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   display: inline-block; 
   padding:1% 2%
   width:16%;
}
#signup #right a { font-size:100%; font-weight:bold } 
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover  { color:#FFF; text-decoration:underline }
Источник

2 ответа

Решение

В IE6/IE7, display: inline-block работает только с элементами, которые встроены естественным образом (например, spanс).

Чтобы он работал на других элементах, таких как divs, вам нужно это:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

*display: inline использует "безопасный" CSS-хак для применения только к IE7 и ниже.

Для IE6/7, zoom: 1 предоставляет hasLayout. Наличие "макета" является обязательным условием для display: inline-block всегда работать.

Возможно применить этот обходной путь, сохраняя действительный CSS, но об этом не стоит задумываться, особенно если вы уже используете какие-либо свойства с префиксом поставщика.

Прочитайте это для получения дополнительной информации о display: inline-block (но забудь о -moz-inline-stack, что требовалось только для древнего Firefox 2).

Источник

*display:inline отлично работает как взломать IE7. Но вы можете добавить zoom:1 к коду как *background:#fff; *display:inline; zoom:1, Здесь вы можете разместить свой код цвета фона. Иногда вы не увидите макет на экране, например, элементы списка не будут отображаться на экране. Затем в таких случаях это прекрасно работает и отображается так же, как и в других браузерах.

Источник
Другие вопросы по тегам