仕事でサイトをつくっていて、こんなふうな仕切り線みたいの(何て言うんだろう?)をCSSだけで書いてやろうといろいろ試行錯誤していた。 そしたら途中でIE10だけ表示が面白いことになった。 どんなふうになったかというと、 まずこんな感じのHTMLを書いて こんなCSSを書いてみた。 制作でメインなfirefoxでは良い感じに表示されるんだけどWebkitではタイトルの文字と三角の部分が微妙にずれてしまう。そっかーインライン要素だから高さの判定が微妙になるのかなと、ブロック要素にしたほうがいいかなとか思った。 ふとIE10ではどんな表示になるかな?とおもって見てみた。するとなんだか面白いことにw以下、スクリーンショットを撮って解説してみよう。 確認したバージョンはIE 10.0.9200.16484 for Windows8。Windows7版では確認してない。 まず普通に表示した。とりあえず
![試行錯誤しながらCSSを書いていたらIE10で表示がおもしろいことになった - bathtimefish's blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/95eb29fc82f3c0d3a77c87f1115583c8a706acda/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbathtimefish%2F20130316%2F20130316222659.png)