Internet Explorer 8 ignora la larghezza di 'display: table-cell' elemento

According to quirks mode, Internet Explorer 8 non fa opzioni di supporto tabella di proprietà di visualizzazione, ma in questo esempio si presenta molto strano comportamento
http://jsfiddle.net/e3cUn/3/Internet Explorer 8 ignora la larghezza di 'display: table-cell' elemento

In un normale browser , l'immagine interna verrà ridimensionata per adattarsi al formato 150 x 150 senza modificare il rapporto di quota (allungamento).

alt text

Ma in IE8, scatola esterna (una blu) anche allungare:
alt text

1) Hai visto qualcosa di simile? Sembra essere correlato a text-align:center: la rimozione di questa proprietà risolve il problema, ma ho bisogno di centrare l'immagine (almeno nei browser non-ie).

2) Se questo non può essere risolto correttamente, come è possibile fornire un valore speciale display per IE? Ho visto alcuni esempi sul web, come #display: block;, ma tutti funzionano solo su IE7.

modifica Conosco <!--[if IE 8]> e comandi simili da inserire in html, ma in realtà stavo cercando un modo per farlo nel file css. Qualcosa di simile

display: table-cell; 
    #display: block;

Seconda riga non è un commento, sovrascrive il valore precedente per ie7 e sotto. (ma non ie8)

Grazie!

fonte

2011-01-05 Nikita Rybak

+1, ho appena colpito lo stesso orrendo bug! –

Puoi anche scegliere come target IE8 con 'display: block \ 9;'. – Tower

Dopo aver aggiunto il bounty, ho finito per aggirare questo problema scegliendo come target il mio CSS in IE8. Ero già usando Paul Irish's technique of adding classes to the <html> element usando i commenti condizionali:

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7 ielt9"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8 ielt9"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Quindi tutto quello che dovevo fare è aggiungere una regola CSS in più per IE 8 e più basso:

.img-container { display: table-cell; } /* IE9+ and other browsers */ 
.ielt9 .img-container { display: block; } /* IE8 and lower */

Accoppiato con il techniques for vertically centring images, questo mi dà una bella soluzione cross-browser.

fonte

2011-10-12 08:52:30

Bel trucco con stili condizionali! Come tutte le cose incredibili, sembra semplice in retrospettiva. –

hai un tag doctype?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head>

Ho avuto lo stesso problema una volta con IE, che ha risolto il problema.

Buona fortuna

fonte

2011-01-05 19:22:45 Sebastjan

Ho cambiato "strict" in "transitional", sempre lo stesso. Bene, grazie per aver provato! –

Se text-align: center non funziona, si può provare quanto segue, invece (a meno che non si dispone di una ragione che utilizzando il layout tabella è necessaria). Questo è generalmente il metodo preferito per centrare qualsiasi elemento di layout di blocco. Utilizzo di Centro text-align è un ripiego quando necessario, ma meno affidabile nella mia esperienza - non è possibile utilizzarlo per div annidati, ecc
```
img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
```
Se avete bisogno di fare una sostituzione personalizzato per IE, la modo più semplice è quello di utilizzare un foglio di stile esterno, e fornire il seguente nella vostra sezione <head>:
```
 
```
di alimentazione che di stile sotto quello ordinario, e dovrebbe ignorare esso. Se lo fa, puoi sempre ricorrere alla fornitura di tag !important alla fine delle istruzioni che devi sostituire (anche se è sempre preferibile evitarlo a meno che non sia assolutamente necessario, dato che compromette l'ereditarietà per elementi figlio, e devi costantemente ricordarlo).Ad esempio:
```
.root img { 
    text-align: left !important; 
    ... 
} 
```

fonte

2011-01-05 19:29:59

1) 'display: table-cell' è l'unico modo decente che conosco per centrare l'immagine verticalmente. E se lo rimuovo, il centraggio orizzontale non è più un problema. –

2) Lo so, stavo davvero cercando un modo per fornire i valori IE _inside_ css file. Non voglio creare fogli di stile separati per esempio (anche se lo farò, se questa è l'unica opzione). Conosci qualcosa del genere? –

1) Ho notato in un breve test che è possibile utilizzare sia 'display: table-cell' per l'elemento contenitore sia il trucco' margin: auto' sull'elemento img. Quindi potresti probabilmente rilasciare 'text-align: center' dall'elemento' .root' e invece usare direttamente 'img'. 2) L'unico hack interno di IE CSS che ho visto con qualsiasi affidabilità (anche se non mi piace) sta usando '*', che I * believe * funziona ancora a partire da IE8. Inoltre, non osservo lo stretching che stai segnalando in IE7, il che è strano dato che IE8 è sbagliato. –

Uso width anziché max-width perché in IE8 sarà presa la larghezza effettiva dell'immagine per la tabella. Controlla questo Fiddle.

Rearrange CSS:

.root img { 
    width: 130px; 
    max-height: 130px; 
}

Aggiornato

CSS:

.root span { 
    width:130px; 
    overflow:hidden; 
    display:inline-block; 
} 
.root img { 
    max-width: 130px; 
    max-height: 130px; 
}

HTML:

<div class="root"> 
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png /></span> 
</div>

fonte

2011-10-12 04:44:19 Sanooj

È una soluzione a metà strada, ma che non manterrà le proporzioni dell'immagine quando l'altezza dell'immagine è maggiore della sua larghezza, giusto? –

ok, ho aggiornato http://jsfiddle.net/e3cUn/61/, ma dovrai utilizzare l'estensione al di fuori dell'immagine. Si prega di verificare la risposta di cui sopra la sua soluzione aggiornata – Sanooj

, +1. Dato che stavo già indirizzando i CSS verso IE 7 e IE 6, ho deciso di modificare il mio codice per indirizzare lo stesso CSS a IE 8, che ha risolto il problema per me. Altrimenti, sarei sicuramente andato per questo. –

sembra aiutare se il contenitore padre di un elemento display:table-cell ha un attributo display:table (e un table-layout:fixed), vedi this example e this related question.

fonte

2013-03-27 11:52:06 0x4a6f4672

Il 'table-layout: fixed' sembra aggiustarlo per me. Grazie. –

Internet Explorer 8 ignora la larghezza di 'display: table-cell' elemento

risposta

Problemi correlati