>IEだけmainタグにCSSが適用されない時の対処法2019年7月23日IEだけmainタグにCSSが適用されない時の対処法FacebookTwitterhatenaLINE今や当然のように記述するようになったHTML5で追加されたタグ。<header>や<footer>、<nav>など、これまでレイアウトを組む際にclass等で命名していたであろう個所もタグとして明確に用意されたわけですが、今回はこのHTML5で追加されたタグの中の<main>タグについて。IEの存在2019年になってもまだ尚、制作者を悩ませることのあるIEという存在。今だに検証対象に入ってしまうのか。いう事を言い始めるとキリが無いのですが、クライアントから検証必須と言われれば対応するしかないのが悲しいところ。いえ基本的な組み方をしていればIEとはいえそんなに独特な崩れや挙動を見せることは少なくなっていた気がしていたのですが、久しぶりにIE独自の不思議な崩れに出くわしてしまいました。mainタグにCSSが適用されない<main>といえば文書のメインコンテンツを表すタグで、以下のような構成はよく見かけます。フッターメインには以下のようにCSSを適用したりしています。auto;}この例だと横幅1080pxで中央寄せ、という感じですね。このCSSが適用されず、IEだけ崩れた状態になる、という事象に出くわしてしまったわけです。IE流の解釈ではmainタグはインライン要素ChromeやFirefox等のブラウザでは<main>はブロック要素として解釈されるので、<div>と同様、widthを指定しなければ横幅100%となります。