Sto provando a impostare la larghezza di un elemento <main> con CSS. Semplicemente usando<main> elemento che non funziona in Internet Explorer 11
main {
width:200px;
}
funziona bene in tutti i browser eccetto Internet Explorer (Edge funziona).
Date un'occhiata a questo esempio: JSfiddle
Il risultato in IE11:
Il risultato in Chrome:
L'elemento HTML5 main non è supportato da Internet Explorer (see browser support data).
È necessario definire main come elemento a livello di blocco per width per funzionare.
eseguire questa regolazione:
main {
display: block; /* new */
width: 200px;
}
Poiché l'elemento main non è riconosciuto da Internet Explorer – che significa che non è definito nel foglio di stile di default di IE – utilizza valori iniziali CSS (per the spec).
Il valore iniziale della proprietà display è inline.
La proprietà width viene ignorata dagli elementi in linea. Dal spec:
10.3.1 Inline, non-replaced elements
La proprietà
widthnon si applica.
Definendo l'elemento main come un elemento a livello di blocco in stili d'autore, la proprietà width funzionerà.
Maggiori dettagli:
Grazie, questo funziona! Strano che IE11 non supporti questo semplice tag HTML5. –
upvoted, buona risposta che è spiegata bene. – Billy
@JensRenders Ci vogliono anni IE per supportare nuovi elementi, proprietà CSS e API supportate da tutti gli altri browser, no, questa non è una sorpresa e non sarà molto diversa in Edge. – Rob