Safariで display:table に overflow:hiddenが効かず、IEは mainタグをブロック要素として扱わない件
今日は「迷家ーマヨイガー」という作品のサイトをリニューアルしたのですが、SafariとIEのCSSではまりました。
Safariは display:table を overflow:hidden しても効かない
キャラクター紹介ページの下部には登場人物のサムネイルが並んでいます。
マウスオーバーすると名前が表示されるのですが、当初は display:table-cell
で縦中央揃えしていました。
<a href=""> <span>名前</span> </a>
a{ display: table; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; } a span{ display: table-cell; vertical-align: center; background-color: red; }
他のブラウザは丸い形でマスキングされるのですが、OSX ElCapitan の Safariだけは四角く表示されてしまいます。
仕方ないので display:block
にし、<span>
をもう一段増やして translateY:50%
で中央揃えにしました。
<a href=""> <span><span>名前</span></span> </a>
a{ display: block; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; } a span{ display: block; width: 100%; } a >span{ background-color: red; position: relative; height: 100%; } a > span > span{ position: absolute; left: 0; top: 50%; translateY: -50%; text-align: center; }
IE11 ではHTML5の <main> をブロック要素にしてくれない
こちらのページに詳細がありました。
これは display:block
することで対応できました。
<main class="mainBox"> </main>
.mainBox{ display: block; }