ダダめも

思いついたことをまとめる

Safariで display:table に overflow:hiddenが効かず、IEは mainタグをブロック要素として扱わない件

今日は「迷家ーマヨイガー」という作品のサイトをリニューアルしたのですが、SafariIECSSではまりました。

mayoiga.tv

Safariは display:table を overflow:hidden しても効かない

CHARACTER | TVアニメ「迷家‐マヨイガ‐」

キャラクター紹介ページの下部には登場人物のサムネイルが並んでいます。 マウスオーバーすると名前が表示されるのですが、当初は 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> をブロック要素にしてくれない

こちらのページに詳細がありました。

qiita.com

これは display:block することで対応できました。

<main class="mainBox"> </main>
.mainBox{
  display: block;
}