この記事は、早稲田大学 AdventCalender 2016 15日目です。
Internet Explorerは未だ息をしています
なので、「少なくともInternet Explorer 11には対応しなければならない」案件が多いのが実態です。
今回も、ブラウザ検証中に「IEでの表示崩れ」が発生したのですが、ググっても解決策がスパッと見つからなかったので、対応策を残しておきます。
やりたかったこと
aタグ内に擬似要素(:before)を生成して、list-style-typeの真似事をしたい。
ただ、以下の条件を満たさなければならない。
- aタグにunderlineをつけるが、
- 擬似要素にはunderlineをつけない
上記の条件を満たす解決策は、すぐに見つかります。
擬似要素のスタイルに、display: inline-blockを付ければ良い。
<a href="#">ナビゲーション1</a>
a {
text-decoration: underline;
}
a:before {
content: "▶︎";
display: inline-block;
}
はまったこと
ブラウザ検証を行うと、IEでは擬似要素もunderlineが付いたままだった...
IE対応をするために、解決策を挙げるとすれば、「aタグに内のテキストノードをspanで囲って、そのspanにunderlineを引く」がある。
<a href="#"><span>ナビゲーション1</span></a>
a {
text-decoration: none;
}
a:before {
content: "▶︎";
display: inline-block;
}
span {
text-decoration: underline;
}
だがしかし...
場合によっては、こんな状況が考えられます。
納品前のブラウザ検証でこの問題が発覚した
- 大規模サイトの制作案件...
- 途中からアサインされた...
- 定義済みのaタグは、spanで囲ってない...
- javascriptでのDOM操作は制約的にNG...
CSSだけで解決したい
ゴリ押しですが、こんな解決方法がありました。
<a href="#">ナビゲーション1</a>
a {
text-decoration: underline;
}
a:before {
content: "▶︎";
display: inline-block;
height: 11.5px;
overflow-y: hidden;
font-size: 10px;
}
擬似要素の高さをunderlineを含まない程度に調整して、overflowをhiddenにしてしまうという方法です。
これで応急処置はできたかな、というところです。
しかし、場合によっては微妙なheightの調整が必要だったりします...
「IEではこんな表示崩れが起こるぞ!」ということを知っていれば、こんな面倒なことをしなくても済むのですが...😇
次は、@susuwatarinの「初心者がhubotをうんたら~の実践編です。火曜はハグの日。」です。