試行錯誤しながらCSSを書いていたらIE10で表示がおもしろいことになった

仕事でサイトをつくっていて、こんなふうな仕切り線みたいの(何て言うんだろう?)をCSSだけで書いてやろうといろいろ試行錯誤していた。

f:id:bathtimefish:20130316222659p:plain

そしたら途中でIE10だけ表示が面白いことになった。
どんなふうになったかというと、

まずこんな感じのHTMLを書いて

こんなCSSを書いてみた。

制作でメインなfirefoxでは良い感じに表示されるんだけどWebkitではタイトルの文字と三角の部分が微妙にずれてしまう。そっかーインライン要素だから高さの判定が微妙になるのかなと、ブロック要素にしたほうがいいかなとか思った。

ふとIE10ではどんな表示になるかな?とおもって見てみた。するとなんだか面白いことにw以下、スクリーンショットを撮って解説してみよう。
確認したバージョンはIE 10.0.9200.16484 for Windows8。Windows7版では確認してない。

まず普通に表示した。とりあえずボロボロに崩れた。

f:id:bathtimefish:20130316223720p:plain


次に、下にスクロールして仕切り線部分を上に逃してみる。

f:id:bathtimefish:20130316223919p:plain

ほんでまた上にスクロールを戻してみると、、、

f:id:bathtimefish:20130316223955p:plain

 

あれ?なんか三角の部分の大きさが変わってる。しかもバラバラの大きさにw
ちなみにスクロールを繰り返して隠したり表示したりするとその度に三角の部分の大きさが変わっていく。なかなか面白い現象だ。サンプルはこちら

この現象はFirefoxWebkit系では起きない。

なんなんだろうか?バグといっていいものなのかどうか判断がつかない。
たぶん画面の更新ごとにしている計算に関係があるんだろうけど。
まあこの書き方だといろんなブラウザで崩れるからどっちみち使えないんだけどIE10だけダイナミックだったので気になった次第。

 

ちなみにもう少しねばったあげく、だいたい安定したものができた。やっぱタイトルと三角の部分をブロック要素にしてheightを指定するとちゃんとなった。

まあまともに表示する。もうちょっとスッキリ書けるような気がするけど、まあ今はこれでいいや。サンプルはこちら