css url() non riconosciuto in Internet Explorer 10

ho questa linea nel mio CSS:css url() non riconosciuto in Internet Explorer 10

.ui-icon-zoom-in { content: url(images/16x16/ZoomIn.png); }

che sto usando con jQuery UI Button widget come questo:

$("#zoomin").button({ text: false, icons: { primary: "ui-icom-zoom-in" } });

In Chrome, posso vedere l'immagine centrata all'interno del pulsante. Tuttavia, in IE10, non vedo l'immagine.

mi manca qualcosa qui?

fonte

2013-04-21 Klaus Nji

Hai dichiarato doctype? So che IE a volte non supporta CSS3 a meno che tu dichiari doctype HTML5 sulla prima riga: '' Nel corretto CSS, il tag 'content' è valido solo su' before' e 'after' pseudo elementi. Forse starai meglio aggiungendo l'immagine usando jquery. –

Sì. Ho dichiarato in _Layout.cshtml –

Come dico qui sotto, non puoi usare 'content' su qualcosa tranne gli pseudo-elementi': before' e ': after'. Chrome non dovrebbe renderlo. (Lo so, sussulto, per una volta IE è quello che si comporta correttamente!) –

La proprietà content è valida solo su: prima e: dopo pseudo-elementi. Si dovrebbe cambiare per:

.ui-icon-zoom-in { 
    background: url(images/16x16/ZoomIn.png) no-repeat; 
    width:16px; 
    height:16px; 
}

A parte questo, IE8 + supporta solo content proprietà, se viene specificato un DOCTYPE valida.

fonte

2013-04-21 14:59:15

Questo è scarso per l'accessibilità, le persone che usano modalità ad alto contrasto non vedranno le immagini impostate come 'sfondo. –

@Niels, questo non funziona neanche per me. –

@Oshawott Sto solo rispondendo alla domanda, non contestare che la soluzione valida debba avere un elemento 'img' con l'attributo' alt' corretto. –

La proprietà content è accettata solo sugli pseudo-elementi :before e :after nei CSS3. Probabilmente è meglio usare un selettore jQuery per aggiungere l'immagine all'oggetto:

$("#zoomin").html("<img src='images/16x16/ZoomIn.png' alt='Zoom In'>");

fonte

2013-04-21 15:02:54

Grazie per questo, ma non voglio inserire le immagini nel codice in codice. Mi piacerà attenermi al modello raccomandato dall'interfaccia utente di jQuery. –

In questo caso, usa un elemento ': before' assoluto posizionato a 0,0 con un tag CSS' content'. Non è semanticamente corretto ma dovrebbe funzionare. Così come '.ui-icon-zoom-in: before {top: 0px; a sinistra: 0px; position: absolute; contenuto: url (images/16x16/ZoomIn.png); } 'quindi crea' .ui-icon-zoon-in' a 0px wide, 0px high con 'position: relative'. –

Grazie ancora. Cosa intendi con "make .ui-icon-zoom-in 0px wide, 0px high con position: relativo"? Sono nuovo di questa roba, quindi il codice aiuta a migliorare. –

ho avuto la stessa situazione in IE 11. Il contenuto è <div class="image"> </div> Così in Chrome funziona così

.image { 
    content: url("image.jpg"); 
}

Per farlo funzionare in IE ho impostato l'opzione content sull'elemento . Mi piace

.image:after { 
    content: url("image.jpg"); 
}

fonte

2017-10-12 09:50:53 stopanko

css url() non riconosciuto in Internet Explorer 10

risposta

Problemi correlati