CSS - Internet Explorer e lo sfondo dello <main>

Ho un layout piuttosto semplice che rende bene sia in Firefox che in Chrome, ma Internet Explorer (versione 11) sembra non essere in grado di rendere alcun tipo di colore di sfondo per l'elemento <main>.CSS - Internet Explorer e lo sfondo dello <main>

ho l'elemento <main> come un figlio dell'elemento <body> e né background o background-color sembrano fare alcuna differenza. <main> avrà sempre lo stesso sfondo di <body>. Non ho trovato nulla che dica se questo è un bug in IE.

Controllare this jsfiddle utilizzando Internet Explorer per vedere cosa intendo.

Ovviamente, potrei semplicemente sostituire <main> con <div id="main"> e aggiornare i miei selettori CSS ma voglio capire perché questo sta accadendo.

fonte

2014-10-05 hololeap

[In realtà è piuttosto facile trovare il * motivo * perché questo sta accadendo] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main#Browser_compatibility). –

IE11 non supporta l'elemento <main> in modo nativo. È possibile introdurre il supporto per esso o utilizzando uno script come Modernizr, o di una singola linea innocua di JS:

document.createElement('main');

l'elemento non sarà inserito nel DOM, ma sarà ora riconosciuto come elemento proprio da IE. Dopo questo, non ha ancora uno stile adeguato. Aggiungere la seguente al CSS:

main { 
    display:block; 
}

E tutto andrà bene. Il motivo per cui attualmente lo vedi come non ottenere alcun contenuto perché IE non lo aggiunge al modello box senza questi 2 passaggi, e in quanto tale non ottiene 'layout' o 'dimensione'. È solo invisibile, ecco perché vedi il corpo. Lo contiene contiene elementi, che vengono renderizzati (in ordine di sorta) correttamente in base alla coordinata in alto a sinistra dell'elemento <main>.

fonte

2014-10-05 20:44:20

Non ho mai pensato che '

' non sarebbe supportato nell'ultima versione di IE. Ora che lo so, ho trovato [questa domanda] (http://stackoverflow.com/questions/20094276/ie11-is-missing-user-agent-style-for-main-element-display-block). Aggiungere 'display: block;' sembra funzionare alla grande. – hololeap

È piuttosto logico. HTML5 non consente l'utilizzo arbitrario di elementi sconosciuti, quindi IE ha perfettamente ragione nel non supportare alcun elemento sconosciuto. IE11 ha all'incirca la stessa età di Chrome 26 e FF21 che sono stati i primi a supportare questa nuovissima aggiunta HTML5. Poiché l'elemento è sconosciuto, ha anche senso che non abbia uno stile predefinito nel foglio di stile dell'agente utente. –

Il contenuto appare nell'elemento '

' ma sembra che lo stia eseguendo come elemento in linea per impostazione predefinita, probabilmente perché IE non lo riconosce. Sembra che sia tutto solo un effetto collaterale del ciclo di aggiornamento relativamente lungo di IE. Lasciando '

' e aggiungendo 'display: block;' al CSS mi dà il meglio di entrambi i mondi: utilizzo dell'elemento HTML5 e compatibilità con i browser più vecchi. – hololeap

Semplice: il tag <main> non è supportato in IE11.

fonte

2014-10-05 20:44:21 fzzle

CSS - Internet Explorer e lo sfondo dello <main>

risposta

Problemi correlati