2

HTML5では、リンクをブロック要素（1つまたは複数）にラップすることができますが、古いブラウザーではどの程度正確にレンダリングされますか？IE6までさかのぼるとしましょう。

私はまだ完全な詳細を見つけていません（しかし、いくつかの例があります）。

マークアップは次のようになります。

<a href="http://example.com">
  <section>
    <h3>Heading</h3>
    <p>Text</p>
  </section>
</a>

また、古いブラウザで互換性を持たせるための最も意味的な方法は、各ブロック要素内のリンクを個別にラップすることでしょうか？ブロック要素をに置き換える提案を見てきましたspanが、それはインラインになり、見出しの意味を変更します。

最近のブラウザ（iOS 6のSafariなど）でさえ奇妙なことをしていることに気づきました。たとえば、モバイルブラウザからこのJSFiddleの画像をクリックしてみてください。下のキャプションとリンクを共有していても、キャプションは強調表示されません。さらに、キャプションをクリックすると、画像もキャプションも強調表示されます。

4

2 に答える 2

2

私の知る限り、動作は一般的に最新のブラウザと同じです。与えられたサンプルマークアップのすべてが単一のハイパーリンクに変わります。これは、古いIEが新しいセマンティック要素を認識するためのHTML5shivを含めるかどうかには関係ありません。

これはおそらく、HTMLには、特定の開始タグが閉じられていないタグを自動的に閉じる<a>必要があることを示すものがないためです。終了タグは、ハイパーリンクの終わりを示すために必要です。

はい、それは、古いHTML doctypeに準拠したい場合に、セマンティクスを保持するために行う方法です。ただし、HTML5に準拠する必要はありません。これは、古いブラウザーでもすでにこのように動作しているという前提に基づいて機能するためです（下位互換性など）。

于 2012-12-09T00:00:46.310 に答える
2

HTML5でのコンテンツモデルの緩和は、a実際のブラウザの動作に関する観察に基づいています。元の構文要件は実際には適用されていません。これはあなたが得ることができる限り行くことが期待することができます。（私はこれをIE6とFirefox3でテストしました。）

したがって、互換性は必要ありません。しかし、リンク要素を分割することは確かに「意味論的」ではありません。「セマンティック」の合理的なセマンティクスについては、2つのリンクは1つのリンクとはセマンティック的に異なります。また、特にキーボードを使用してリンク間を移動する場合は、使いやすさの問題になります。

視覚的なレンダリングは別の問題です。HTML5ドラフトから、または実際の考慮事項から、リンクがほぼすべてを含む可能性がある場合に、さまざまな状態でリンクをどのようにレンダリングする必要があるかは、まったく明確ではありません。これが、古い構文要件の背後にある主な理由である可能性があります。ブラウザはそのようなリンクを一貫してレンダリングしません。これは、少なくとも下線に適用されます。機能的な違いもあります。たとえば、一部のブラウザでは、見出しテキストの右側の領域をクリックできません。つまり、テキストのみが「アクティブ」ですが、他のブラウザでは、要素の領域全体（デフォルトでは見出しに使用可能な幅全体）が作成されます。 ） "アクティブ"。

したがって、このようなリンクを使用する場合の基本的な問題は、リンクをどのようにレンダリングするか、およびクロスブラウザーで適切に機能する方法でCSSでそれを行う方法を検討することです。

于 2012-12-09T08:51:20.457 に答える