Встроенный блок не работает в Internet Explorer 7, 6 - PullRequest
Новая
       30

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

77 голосов
/ 30 апреля 2011

У меня есть этот код 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 ]

180 голосов
/ 30 апреля 2011

В 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 голосов
/ 13 августа 2013

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

...