今回は「画像の縦方向のセンタリング その２」を
ご紹介する予定でしたが、予定を変更して、
IE8のバグ？について、お話しをさせていただきたいと思います。
実は、（CSSプログなのに）CSSのお話しではありませんが、
個人的に旬な話題でしたので、ご紹介させていただきます。
まずはこちらのサンプルをWindowsのIE8でご確認ください。
▼スクリーンショット
※スクリーンショットは、Windows Internet Explorer 8.0のものです。
※スクリーンショットは、Windows Internet Explorer 8.0のものです。
- （htmlコーディング）
- <p><a href="#test1">ホーム</a> > <a href="#test2">カテゴリ</a> > 詳細</p>
サンプルは、Webサイトで良く使われている「パンくずリスト」を再現したものですが、
リンクが無いところで、マウスポインターが変わり、クリックするとちゃんと
リンクとして動作してしまいます。
バグの症状は、
インライン要素の先頭がaタグで始まっているときに、
インライン要素の最後に先頭で指定されたリンクが発生する
というもののようで、
途中でbrタグで改行しても、しっかりリンクが発生しますが、
aタグの前になにかしらのテキストがある場合は、
発生しないようでした。
はじめて見たときに、IE8のバグではないかと思いましたが、
検索をしてみても、それらしい情報を見つけることができませんでした。
なにかしらのスタイルが関係しているのかと思い、
スタイルを読み込まない状態にしてみましたが、
全く症状が治ることはありませんでした。
正直、治らないかと思いましたが、いろいろやってみると
発生しない条件を2つ見つけることができました。
- ○ DOCTYPEの宣言を取る
- ○ リンクが現れる部分（インライン要素の最後）を何かしらのタグで囲む
DOCTYPEの宣言を外すことは難しいため、
2つ目の「何かしらのタグで囲む」対応となるかと思います。
strongでも、fontでもなんでも良いのですが、
サンプルではspanで囲んでみました。
▼スクリーンショット
※スクリーンショットは、Windows Internet Explorer 8.0のものです。
※スクリーンショットは、Windows Internet Explorer 8.0のものです。
- （htmlコーディング）
- <p><a href="#test1">ホーム</a> > <a href="#test2">カテゴリ</a> > <span>詳細</span></p>
無事にリンクが無くなったことを
ご確認いただけましたでしょうか？
今回は、CSSのお話しではありませんでしたが
関連している情報につきましては
今後もご紹介させていただきたいと思います。
