Встроенный блок не работает в 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 }

Ответы

Ответ 1

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

Чтобы заставить его работать с другими элементами, такими как div s, вам понадобится следующее:

#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).

Ответ 2

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