Firefox のバグ？ネスト時のレンダリングについて。

解決済

質問者：funafuna38
質問日時：2008/03/07 17:53
回答数：2件

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は非常に長く何回もアンカータグを記述するのは避ける必要がありました。

どうかよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： steel_gray
回答日時：2008/03/07 18:40

Firefoxの挙動も怪しいけど、

アンカーの中身として許されていない要素を入れているのだから、ブラウザがどう補正するかはわからないで止めておいた方がいいかと思います。

divを止めてspanにしたらどうでしょうか？
<a href="Link2" class="Link">
<span class="Title">text</span>
<span class="Text">text</span>
</a>
追加スタイル
.Link ,
.Title ,
.Text{display:block;}