IE7 non comprende il display: inline-block

127

Qualcuno può aiutarmi a risolvere il problema con questo bug? Con Firefox funziona benissimo ma con Internet Explorer 7 no. Sembra non capire il 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

Cosa ottieni esattamente da te? Quale effetto?

— Iladarsda,

302

L' display: inline-block;hack di IE7 è il seguente:

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

Per impostazione predefinita, IE7 supporta solo elementi inline-blocknaturali inline( tabella di compatibilità modalità Quirks ), quindi è necessario questo hack solo per altri elementi.

zoom: 1è lì per innescare il hasLayoutcomportamento e usiamo l' hack della proprietà star per impostare displayto inlinesolo in IE7 e versioni precedenti (i browser più recenti non lo applicheranno). hasLayoute inlineinsieme in pratica scateneranno inline-blockcomportamenti in IE7, quindi siamo felici.

Questo CSS non verrà convalidato e può rendere il tuo foglio di stile incasinato comunque, quindi usare un foglio di stile solo IE7 attraverso commenti condizionali potrebbe essere una buona idea.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

— Kapa
fonte

40

Preferisco *zoom:1;triger hasLayout. Quindi è più chiaro che l' *zoome *displayvanno di pari passo

— yunzen

4

@RoshanWijesena w3schools non ha nulla a che fare con w3c e nemmeno le autorità su ie7

— Musa

1

@RoshanWijesena w3schools non è una buona risorsa e non è affatto ufficiale. Non dipendere da questo. Il fatto che menzionino o non menzionino qualcosa in realtà non significa nulla.

— Kapa,

1

grazie ragazzi! quindi cosa dovrei usare come documentazione ufficiale solo per chiedermi!

— Roshan Wijesena,

2

@RoshanWijesena Puoi trovare le specifiche standard ufficiali su w3.org , la pagina ufficiale del W3C. developer.mozilla.org è una grande risorsa che puoi usare al posto di w3schools come riferimento.

— kapa,

8

Aggiornare

Dato che nessuno usa più IE6 e 7, presenterò una soluzione diversa:
non hai più bisogno di un hack perché IE8 lo supporta da solo

Per coloro che devono supportare quei browser dell'età della pietra prima di IE8 (Non è che IE8 sia così vecchio, troppo tosse ):
per l'account del controllo della versione di IE, usa una classe condizionale nel <html>tag come afferma Paul Irish nel suo articolo

<!--[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]-->

In questo modo avrai diverse classi nel tag html per diversi browser IE

Il CSS che ti serve è il seguente

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

Ciò verrà convalidato e non è necessario un file CSS aggiuntivo

Vecchia risposta

.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

Il CSS che mostri sopra ha senso, ma come funzionerebbe esattamente nell'HTML? Grazie.

— StephenESC,

@StephenESC in due modi. Aggiungere la classe inline-blockal frame-headerelemento. O cambiare inline-blockda frame-headernei selettori CSS.

— yunzen,

1

IE7 non supporta correttamente 'inline-block', maggiori informazioni qui: LINK
Use può usare invece: 'inline'.

Cosa stai cercando di ottenere esattamente? Facci un esempio e mettici qui: http://jsfiddle.net/

— Iladarsda
fonte

0

usa in linea, funziona con questo tipo di selettori per gli elementi dell'elenco:

ul li {}

o per essere specifici:

ul[className or name of ID] li[className or name of ID] {}

— MiddleKay
fonte

2

inlinenon è lo stesso di inline-block. Ad esempio, height: 25px;nell'esempio non avrà effetto quando l'elemento lo è inline. Inoltre, la domanda non dice nulla sugli elenchi.

— Kapa,