Firefoxのバグ：ブロック要素の外側リンク

Question

私は以前のFirefoxはブロック要素の周りのリンクの折り返しとの大きな問題があり、それは最近私にいくつかの問題を与えなかったことを聞きました。

それは時々（多分20％の割合で）、何らかの理由で、このコードを変更する（すべての要素が私のスタイルシートでブロック要素として定義されていることに注意）である。この中へ

<li> 
    <a href="product.htm"> 
    <img src="product-image.jpg" width="100" height="100" alt="Product image" /> 
    <h2>Product title</h2> 
    <p>Product description</p> 
    </a> 
</li> 

：

<li> 
    <a href="product.htm"> 
    <img width="100" height="100" alt="Product image" src="product-image.jpg"> 
    </a> 
    <h2> 
    <a _moz-rs-heading="" href="product.htm">Product title</a> 
    </h2> 
    <p></p> 
    <p> 
    <a href="product.htm">Product description</a> 
    </p> 
</li> 

これは、スタイルシートに完全に間違った方法で要素を表示するよう強制します。 要素を使用して、製品イメージ、タイトル、説明を含む大きなリンクをWebショップの製品リストに表示します。

私はそれらの大きいリンクをしたいと、これを行うための別の方法を見つけることができません。何をお勧めしますか？

Answer 1

私はリソースxhtml.comがどのように権威を知らないが、彼らはaタグのみを含めることができると言うん：、任意の深さで

テキスト

除く

• インライン要素を、

可能な解決策は、HTMLを再構成してより理にかなったものにすることです（ブロックレベルの要素インラインレベル要素の中で）。製品のための単一のリンクを（ちょうどh2、または画像の周りに）持っているだけです。次にJavaScriptを使用してliのどこかでクリックを検出し、リンクを読み込みます。何の意味も持た

していますか？ Here's an example.

Answer 2

は、これらのリスト項目のすべてのインスタンスが一貫してコード化されていますか？ （読んでください：バリデーターを通してすべてを実行してください）あなたはそれが20％の時間しか起こらないと言ったので、最初に破損しているものについては何も変わりません。これは、ブラウザの一部に過大な訂正のように見えます。 _moz-rs-headingを検索すると、古い記事like this oneが表示されます。しかし、いくつかのケースでは、実際には<a>というタグが壊れていて、見ていないだけでなく、修正しているのは、Firefoxがそれを処理しようとしていることですやや優雅に。

Answer 3

私は同じ問題を抱えています。同じHTMLは、さまざまな方法で表示していました。私がページをリフレッシュするたびに、Firefoxは私の<a>..</a>を多くの小さな<a>..</a><a>..</a>ブロックに分割しました。 （ほぼ）間違って表示されます。

This pageが良い資源である、それは<a>直下<div>を置く提案し、実際に動作しませんでした私のWebデザイナーが付属していたページには、すでにそれを持っていました。

私がしたことは、私の<div>を<span style="display:block">に置き換えることでした。

<a ...> 
    <span style="display:block"> 
     ... 
    </span> 
</a>