CSS で「＞」矢印を作る際、IE でゴミが出る

3631 ワード
CSS CSS テキストリンク

以前ハマったくせにすっかり忘れていたので、自分用メモ。
CSS で「＞」矢印を作る際、border でショートハンドを用いると、IE において不要な薄い線が発生するケースがある。

こんな具合に、左に薄く線が出る。

これを避ける為には「border-top」「border-right」など個別に設定を行う。

.icon-arrow {
position: relative;
padding: 0 0 0 20px;
}

.icon-arrow:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
margin-top: -6px;
border-top: 4px solid #000;
border-right: 4px solid #000;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

どちらの設定でも2行必要だが、「色指定が1箇所で済むし〜」とショートハンドを用いるとハマる。
transform: rotate の角度や表示位置によって出たり出なかったりというのも落とし穴。

/*　ダメな例　*/
.icon-arrow:before {
..
border: solid #000;
border-width: 4px 4px 0 0;
..
}
Webviewで遭遇したいくつかの問題
Web開発総合クラスを使用する前に準備(1 7){Bootstrap!}