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

2 ответа:

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

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