Hallo,
auf den IE8 / IE9 und IE10 lege ich auch keinen Wert. Aber der IE11 soll auch nicht mehr berücksichigt werden?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>IE 11 main-Element</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Grundeinstellungen*/
@media all {
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0.5rem;
margin: 0;
}
main {
background-color: yellow;
padding: 0.5rem;
border: 2px solid orange;
margin: 0.5rem;
}
main:nth-child(5) {
display: block;
}
}
</style>
</head>
<body>
<h1>main mit IE</h1>
<p>In der Praxis dürfen natürlich keine zwei main-Elemente auf einer Seite vorkommen.</p>
<p>Die Seite mal im IE11 betrachten.</p>
<main>
<h2>main - nicht als Blockelement deklariert</h2>
</main>
<main>
<h2>main - als Blockelement deklariert</h2>
</main>
</body>
</html>
Auf meinen Rechnern bekommt der IE11 das main-Element ohne zusätzliche block-Anweisung nicht gebacken.
Ähnliches gilt auch für das unterste Beispiel von Selfhtml
http://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundstruktur
das so im IE11 nicht funktioniert und für das ohne weiteren Hinweis im "ansehen..." (also im praktischen Beispiel) noch ein "display: block;" für das main-Element eingeschmuggelt wurde.
Darüber, ob und wie der IE11 mit den anderen neuen Elementen zurecht kommt mache ich mir keinen Kopf. Solange der IE11 noch relevant ist bleibt in meinen Beispielen die Block-Anweisung für die neuen Elemente drin. Auch unabhängig davon, ob sie auf der Seite verwendet werden oder nicht.
Gruss
MrMurphy