「CSS3だけでタブ機能」を実装ときにIEだけ不具合が発生した場合の対応方法について

「CSS3だけでタブ機能」を実装ときにIEだけ不具合が発生した場合の対応方法について

こんにちわ。TAKA(@web_creativelab)です。

1年以上振りの更新です。「1年更新しなかったら収益はどうなるか!?」をテストしてました(嘘)
一応「Google AdSense」から多少の収益がありました。
1度書いたら半永久的に資産になるのがブログの良いところですね(棒)

さて、今回はCSS3でタブ機能を実装するときに、例の如くIE(11)だけ不具合があったので対処法についての備考録です。

CSS3だけでタブ機能を実装する方法

今回、CSS3だけでタブを実装するにあたり、参考にした記事があるのですが、IEだけタブの中身に隙間ができる不具合があったので、少しCSSを追加して使わせていただきました。
もしかしたら僕の環境だけの不具合かもしれませんが、もしも同じ不具合に悩んでいる方がいたらお役に立てれば幸いです。

ソースを拾ってくる

CSS3だけでタブ機能を実装する方法は親切な方が載せているので、今回はそのままソースを拝借させていただきます。
以下のURLをご参照ください。

tabshttp://qiita.com/takanorip/items/078682784ddab03d1c4e

CSSを追加

それでは次にCSSを追加します。
簡単に説明すると「display」属性を使って、選択してないタブは中身を非表示にして、タブを選択したら中身を表示する感じです。

CSS追加前

#panels section main {
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  -webkit-transition: opacity 600ms;
  transition: opacity 600ms;
  overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
  max-height: initial;
  opacity: 1;
}

CSS追加後

#panels section main {
  display: none;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  -webkit-transition: opacity 600ms;
  transition: opacity 600ms;
  overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
  display: inline;
  max-height: initial;
  opacity: 1;
}

ひとこと

久々のブログということで今回は簡単に。
やっぱりブログ書くのは楽しいですね。
時間ができたらまた再開したいと思います!

CSSに関連した記事