0

HTML 内に次のコードがありますが、これは十分に単純に思えます。

<div>
    <a" class="test">Test</span>
</div>

しかし、レンダリングしようとすると、a要素がページ全体に複製されます。なぜこれが起こっているのかについて何か考えはありますか？

4

3 に答える 3

2

最新のブラウザーは、誤ってネストされたタグに対して特別なルールを持つ HTML5 解析アルゴリズムを使用します: http://www.w3.org/TR/html5/syntax.html#an-introduction-to-error-handling-and-strange-cases-in-パーサー。インライン表示での動作の違いは、インラインとブロックの書式設定コンテキストの空白処理モデルが異なるためだと思います。その結果、このアルゴリズムによって作成された暗黙的な要素に表示されるテキスト コンテンツが異なります。

于 2013-07-31T22:33:16.433 に答える
1

私は以前にこの問題に遭遇し、深く掘り下げた後に多くのことを発見したので、私の発見を共有する価値があると思いました. この単純なコードで問題を再現できました。

<div id="one">
    <div id="two">
        <a class="test">Test</span>
    </div>
</div>
<div id="three>
    <div id="four">
    </div>
</div>

上記のコードは、要素の 1 つではなく 2 つではなく 3 つのインスタンスをレンダリングしますa。コンテンツはありませんが、css クラスはそのままです (2 つに 1 つ、3 つと 4 つをラップします)。

しかし、ちょっと待ってください。

  • span終了タグをリンクに置き換えると</div>、リンクは複製されますが、2 回だけになり、3 と 4 をラップするリンクは存在しなくなります。
  • style="display:inline;"エンディングのあるバージョンに追加すると</div>、動作はエンディング スパンの場合と同じになります。aそれがすでにインライン要素であることに気付くと、さらに奇妙になります。
  • 結果はブラウザー間で一貫しています。つまり、これは 1 つのエンジンの癖ではなく、HTML 固有のものである可能性が高いことを意味します。(webkit と Gecko ブラウザーで試しましたが、Trident はまだ試していません)。

これが興味深い/役に立つことを願っています。確かに、初めて見たときはループに陥りました。

于 2013-07-31T22:13:54.623 に答える