- ベストアンサー
Firefox のバグ？ネスト時のレンダリングについて。
Firefox のバグかと思い調べたのですが、調べ方が悪いのか解決策を見出すことができませんでした。 問題ですが、まず以下のHTMLソースをコーディングしました。これを iframe.html として、別のファイルから参照させます。 ■iframe.html の中身 <style type="text/css"> .Link{font-size:10px;color:blue;cursor:hand;} .Title{font-size:14px;color:#000;} .Text{font-size:12px;color:#000;} </style> <table> <tr> <td> <a href="Link1" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> <td> <a href="Link2" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> </tr> </table> ■別ファイルの中身 <body> <iframe src="iframe.html"></iframe> </body> なぜこういう構造になっているかというと、まず a タグの アンカー機能を子要素に継承させ、その中の a タグにネストされるどの部分をクリックしてもリンク先を同じにしたいからです。 IE,Opera等では問題ないのですが、Windows版 Firefox2 で確認し、何度もリロードしているとたまに、 .Title と .Text が効いてないような表示になります。それも必ず後に記述されている td 側の中身が。 はてな、と思いFirebugでみてみると、以下のようにレンダリングされていました。 <a href="Link2" class="Link"> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </a> この原因がわかりません。 以下のような構造にして、 <div> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </div> CSSを編集すれば解決することなのですが、 Link2 のURLは非常に長く何回もアンカータグを記述するのは避ける必要がありました。 どうかよろしくお願いします。
- funafuna38
- お礼率100% (4/4)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Firefoxの挙動も怪しいけど、 アンカーの中身として許されていない要素を入れているのだから、ブラウザがどう補正するかはわからないで止めておいた方がいいかと思います。 divを止めてspanにしたらどうでしょうか？ <a href="Link2" class="Link"> <span class="Title">text</span> <span class="Text">text</span> </a> 追加スタイル .Link , .Title , .Text{display:block;}
その他の回答 (1)
- Tacosan
- ベストアンサー率23% (3656/15482)
ちと HTML4.01 の DTD を見てみたのですが, DIV要素は A要素の子要素にできないんじゃないでしょうか. つまり, もともと HTML として間違っており, 各ブラウザが勝手に解釈した結果として Firefox だけが期待通りに動いていない, という可能性があります. DIV じゃなくて SPAN にしたらどうなりますか?
お礼
ご回答ありがとうございます。 No1さんへの回答と重複してしまうため内容は割愛しますが、 試してみます。
お礼
ご回答ありがとうございます。 span確認していませんでしたが、ご指摘いただいたように ネストのルールを無視していることに原因がありそうですね。 確認してみます。