CSS - Internet Explorer i tło znacznika <main>

Mam dość prosty układ, który dobrze się sprawdza zarówno w Firefoksie, jak i w przeglądarce Chrome, ale Internet Explorer (wersja 11) prawdopodobnie nie jest w stanie renderować żadnego koloru tła dla elementu <main>.CSS - Internet Explorer i tło znacznika <main>

Mam element <main> jako dziecko elementu <body> ani background lub background-color wydaje się żadnej różnicy. <main> będzie zawsze mieć to samo tło, co <body>. Nie znalazłem niczego, co mówi, czy jest to błąd w IE.

Aby sprawdzić, o co mi chodzi, sprawdź program Internet Explorer pod numerem this jsfiddle.

Oczywiście mogę po prostu wymienić <main> z <div id="main"> i zaktualizować selektory CSS, ale chcę zrozumieć, dlaczego tak się dzieje.

Źródło

2014-10-05 hololeap

[Właściwie łatwo znaleźć * przyczynę * dlaczego tak się dzieje] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main#Browser_compatibility). –

IE11 nie obsługuje natywnie elementu <main>. Można wprowadzać wsparcie dla niego albo przez użyciu skryptu jak Modernizr lub pojedynczy nieszkodliwe linię JS:

document.createElement('main');

element nie zostanie wstawiony w DOM, ale zostanie uznany za odpowiedniego elementu przez TO ZNACZY. Po tym wciąż nie ma odpowiedniej stylizacji. Dodaj do swojego arkusza CSS:

main { 
    display:block; 
}

Wszystko będzie dobrze. Powodem, dla którego obecnie nie widzisz żadnych treści, ponieważ IE nie dodaje go do modelu pudełkowego bez tych 2 kroków i jako taki nie otrzymuje "układu" ani "rozmiaru". Jest po prostu niewidoczny, dlatego widzisz ciało. Zawiera on elementy, które są renderowane (sortowane) poprawnie w oparciu o lewą górną współrzędną elementu <main>.

Źródło

2014-10-05 20:44:20

Nigdy nie sądziłem, że '

' nie będzie obsługiwane w najnowszej wersji IE. Teraz, kiedy to wiem, znalazłem [to pytanie] (http://stackoverflow.com/questions/20094276/ie11-is-missing-user-agent-style-for-main-element-display-block). Dodanie 'display: block;' wydaje się działać świetnie. – hololeap

To całkiem logiczne. HTML5 nie pozwala na dowolne użycie nieznanych elementów, więc IE ma rację, nie wspierając żadnych nieznanych elementów. IE11 jest mniej więcej w tym samym wieku co Chrome 26 i FF21, które jako pierwsze wspierały ten nowy dodatek do HTML5. Ponieważ element jest nieznany, ma również sens, że nie ma domyślnego stylu w arkuszu stylów użytkownika. –

Zawartość pojawia się w elemencie '

', ale wygląda na to, że renderuje go jako element wstawiany domyślnie, prawdopodobnie dlatego, że IE go nie rozpoznaje. Wygląda na to, że to tylko skutek uboczny stosunkowo długiego cyklu aktualizacji IE. Pozostawienie '

' i dodanie 'display: block;' do CSS daje mi to, co najlepsze z obu światów: użycie elementu HTML5 i kompatybilność ze starszymi przeglądarkami. – hololeap

Prosta: Tag <main> nie jest obsługiwany w IE11.

Źródło

2014-10-05 20:44:21 fzzle

CSS - Internet Explorer i tło znacznika <main>

Odpowiedz

Powiązane problemy