larghezza massima su <img> tag non funziona in IE8

Question

Ho uno strano problema. Su un sito che stava attualmente costruendo abbiamo una funzione galleria attraverso il plugin jQuery, Gallerific. La galleria si apre in una finestra modale. Quello di cui ho bisogno è impostare una larghezza massima delle immagini su 765px. Quindi ho impostato la larghezza massima: 765px; nel mio CSS. So che non sto lavorando in IE6, ma non mi interessa.

La cosa strana è che quando uso un'immagine di ad es. 1400px wide, IE8 in visualizzazione compatibile, Firefox, Chrome, Safari e Opera, tutto ridimensiona questa immagine fino a 765px in larghezza - ma non IE8! Non riesco a capire perché questo non funziona.

Chiunque ha idea di cosa sta succedendo o di come è ancora migliore, come risolverlo?

Le vostre risposte sono molto apprezzate - Grazie!

saluti, Kim

Answer 1

Forse Gallerific applica un max-width per la mosca? Hai provato con !important?

Answer 2

Ti sei imbattuto in "Almost Standards Mode" di IE8 (progettato per essere interrotto allo stesso modo di IE7). L'aggiunta di un meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=8"> 

o un vero e proprio campo di intestazione HTTP con gli stessi valori dovrebbe si mettere in corretta modalità standard. Si noti che il meta tag deve apparire prima di qualsiasi script o elementi di stile per funzionare correttamente.

Answer 3

IE8 richiede che un contenitore sia posizionato attorno all'immagine, con la larghezza impostata sulla larghezza massima che si sta cercando, o con una larghezza del 100% (sembra funzionare meglio su div in posizione assoluta). IE8 sembra essere felice finché viene definita una larghezza su quel contenitore.

Per esempio, è possibile impostare il div contenitore per la larghezza massima che stai cercando, mentre l'impostazione della proprietà max-width di tutte le immagini al 100%:

.container { width: 765px;} 
img { max-width: 100%;} 

che costringe le immagini per essere non più della larghezza del contenitore in cui sono stati trovati.

Assicurarsi di dichiarare un doctype HTML5; A IE non piacciono i doctypes XHTML.

Cordiali saluti, Larry

Answer 4

mi sono imbattuto in un problema simile, la soluzione del contenitore non funziona quando si hanno le immagini di diverse dimensioni, se l'immagine è piccola lascerebbe un sacco di spazio sul lato della l'immagine. Apparentemente l'altezza massima funziona bene in IE8, consiglierei di usarlo se è possibile.

Answer 5

Come spiegato in altre risposte, è necessario applicare una larghezza a un contenitore per risolvere questo problema in IE8. Per una soluzione specifica Galleriffic, è possibile aggiungere css simile a questo:

a.thumb img 
{ 
    max-width: 160px; 
} 

/* IE 8 specific bug */ 
a.thumb 
{ 
    width: 160px; 
} 

Answer 6

Ehi una cosa che si potrebbe desiderare di provare (che mi ha fatto sbattere la testa contro un muro), in modo da rendere sicuro il vostro DOCTYPE è di set-up correttamente.

IE8 funziona con la versione HTML5, ma se è minuscolo no.

http://www.kintek.com.au/blog/ie8-max-width-max-height-and-inline-ie8-css-hacks/

C'è anche fresco hack CSS in linea che si può fare per affrontare le specifiche piattaforme:

Larghezza: 200px \ 9;/* ie8 e precedenti / altezza: 200px \ 9;/ ie8 e precedenti */

Answer 7

Mi sono imbattuto in qualcosa di simile con IE 8 e 9 e ho riscontrato un problema diverso nel mio codice che vale la pena menzionare.

Avevo un div con larghezza 100%, quindi un div che aveva una larghezza massima di 980 px.

Per qualche motivo la larghezza massima non veniva vista e un elemento all'interno di quel 980 div che avrebbe dovuto galleggiare a destra non lo era.

Ho eseguito la pagina tramite codice validatore w3 e ha rilevato un commento che era prima della dichiarazione doctype e ha detto che IE sarebbe in modalità "quirks".

Non appena mi sono trasferito che affido al di sotto della dichiarazione DOCTYPE avvertimento modalità del validater 'stranezze' andato via e tutto ha funzionato bene in IE 8 e 9.