XHTML 1.1 への準拠を維持しながら Div 要素をクリック可能にするにはどうすればよいですか?

XHTML 1.1 準拠で Div をクリック可能なリンクに変える

視覚的に豊かな

を変換する必要性既存のコンテンツを変更せずに要素をクリック可能なリンクに追加することは、さまざまな Web 開発シナリオで発生します。

をラップする単純な方法は、 内で

有効な XHTML 1.1 ソリューションの実装

この課題に対処するには、より複雑なソリューションが必要です。 XHTML 1.1 準拠を維持します。

を直接ラップする代わりに、

• デフォルトのリンクを作成します:
  内にリンク要素 () を配置します。これは要素全体のプライマリ リンクとして機能します。
• 空のスパンを挿入します。 内に
• 要素の位置: 「position:relative;」を割り当てます。
  へ
• スパンの CSS: 次の CSS プロパティを空のスパンに適用します:

{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}   

この CSS は、次のことを保証します。スパンは

全体をカバーします。クリック可能なリンクとして機能し、ユーザーのアクセシビリティを強化し、XHTML 1.1 準拠を維持します。