O IE7 não entende a exibição: bloco em linha

127

Alguém por favor pode me ajudar a resolver esse bug? Com o Firefox está funcionando bem, mas com o Internet Explorer 7 não está. Parece não entender o display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

css:

.frame-header {
    height:25px;
    display:inline-block;   
}
html internet-explorer-7 css lanthuong
fonte
1
O que exatamente você deve conseguir? Que efeito?
Iladarsda

Respostas:

302

O display: inline-block;hack do IE7 é o seguinte:

display: inline-block;
*display: inline;
zoom: 1;

Por padrão, o IE7 suporta apenas elementos inline-blocknaturais inline( Tabela de compatibilidade com Quirksmode ), portanto, você só precisa desse hack para outros elementos.

zoom: 1está lá para gatilho hasLayoutcomportamento, e usamos a propriedade corte estrela para definir o displayque inlinesomente no IE7 e inferiores (browsers mais recentes não aplicará as). hasLayoute inlinejuntos desencadearão basicamente o inline-blockcomportamento no IE7, por isso estamos felizes.

Esse CSS não será validado e pode fazer com que sua folha de estilo seja uma bagunça, de modo que usar uma folha de estilo somente no IE7 por meio de comentários condicionais pode ser uma boa idéia.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
kapa
fonte
40
Eu prefiro *zoom:1;fazer o hasLayout. Por isso é mais claramente que o *zoome *displayir juntos
yunzen
4
@RoshanWijesena w3schools não tem nada a ver com W3C e nem são autoridades no IE7
Musa
1
@RoshanWijesena w3schools não é um bom recurso e não é oficial. Não dependa disso. O fato de mencionarem ou não mencionarem algo realmente não significa nada.
Kapa
1
obrigado rapazes! Então, o que eu deveria usar como uma documentação oficial apenas querendo saber!
Roshan Wijesena
2
@RoshanWijesena Você pode encontrar as especificações padrão oficiais em w3.org , a página oficial do W3C. O developer.mozilla.org é um ótimo recurso que você pode usar em vez do w3schools como referência.
Kapa #
8

Atualizar

Como ninguém mais usa o IE6 e o ​​7, apresentarei uma solução diferente:
você não precisa mais de um hack, porque o IE8 o suporta sozinho

Para aqueles que precisam oferecer suporte aos navegadores da idade da pedra antes do IE8 (não é que o IE8 seja tão velho assim, tosse demais ):
por conta do controle de versão do IE, use alguma classe condicional na <html>tag, como Paul Irish afirma em seu artigo

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

Por isso, você terá diferentes classes no html-tag para diferentes navegadores IE

O CSS necessário é o seguinte

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

Isso será validado e você não precisa de um arquivo CSS extra

Resposta antiga

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
yunzen
fonte
O CSS que você mostra acima faz sentido, mas como exatamente isso funcionaria no HTML? Obrigado.
StephenESC
@StephenESC duas maneiras. Adicione a classe inline-blockao frame-headerelemento Ou alterar inline-blockpor frame-headernos seletores CSS.
yunzen 13/09/14
1

O IE7 não suporta 'bloco embutido' corretamente, mais informações aqui: LINK
Use pode usar: 'embutido'.

O que exatamente você está tentando alcançar? Faça um exemplo e coloque aqui: http://jsfiddle.net/

Iladarsda
fonte
0

use inline, ele trabalha com esse tipo de seletor para itens de lista:

ul li {}

ou para ser específico:

ul[className or name of ID] li[className or name of ID] {}
MiddleKay
fonte
2
inlinenão é o mesmo que inline-block. Por exemplo, o height: 25px;exemplo não terá efeito quando o elemento for inline. Além disso, a pergunta não diz nada sobre listas.
Kapa