2010年03月05日

IE8.0のバグ 〜テキストの右側にリンクが表示されてしまうバグ

こんにちは、馬場です。

今回は「画像の縦方向のセンタリング その2」を
ご紹介する予定でしたが、予定を変更して、
IE8のバグ?について、お話しをさせていただきたいと思います。

実は、(CSSプログなのに)CSSのお話しではありませんが、
個人的に旬な話題でしたので、ご紹介させていただきます。

まずはこちらのサンプルをWindowsのIE8でご確認ください。

▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 8.0のものです。

(htmlコーディング)
<p><a href="#test1">ホーム</a>&nbsp;&gt;&nbsp;<a href="#test2">カテゴリ</a&gt;&nbsp;&gt;&nbsp;詳細</p>
サンプルを表示


サンプルは、Webサイトで良く使われている「パンくずリスト」を再現したものですが、
リンクが無いところで、マウスポインターが変わり、クリックするとちゃんと
リンクとして動作してしまいます。

バグの症状は、
インライン要素の先頭がaタグで始まっているときに、
インライン要素の最後に先頭で指定されたリンクが発生する

というもののようで、
途中でbrタグで改行しても、しっかりリンクが発生しますが、
aタグの前になにかしらのテキストがある場合は、
発生しないようでした。


はじめて見たときに、IE8のバグではないかと思いましたが、
検索をしてみても、それらしい情報を見つけることができませんでした。

なにかしらのスタイルが関係しているのかと思い、
スタイルを読み込まない状態にしてみましたが、
全く症状が治ることはありませんでした。


正直、治らないかと思いましたが、いろいろやってみると
発生しない条件を2つ見つけることができました。




DOCTYPEの宣言を外すことは難しいため、
2つ目の「何かしらのタグで囲む」対応となるかと思います。


strongでも、fontでもなんでも良いのですが、
サンプルではspanで囲んでみました。


▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 8.0のものです。

(htmlコーディング)
<p><a href="#test1">ホーム</a>&nbsp;&gt;&nbsp;<a href="#test2">カテゴリ</a&gt;&nbsp;&gt;&nbsp;<span>詳細</span></p>
サンプルを表示


無事にリンクが無くなったことを
ご確認いただけましたでしょうか?

今回は、CSSのお話しではありませんでしたが
関連している情報につきましては
今後もご紹介させていただきたいと思います。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 20:53 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。