0

<a></a>どのような HTML 要素を公平に入れることができますか?
私は次のことをするのが大好きです

<a href="#" title="Click the icon">
    <div style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9000;">
        <h3>
            Lorem ipsum
        </h3>
    </div>
</a>

また

<ul>
    <a href="#" title="Click the icon">
        <li style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9999;">
            <h3>
                Lorem ipsum
            </h3>
        </li>
    </a>
</ul>

、しかし、私が思うに、受け入れられません。同じことを言っているw3バリデータ。

多分これは解決策になるかもしれません：

<a href="#" title="Click the icon">
    <span style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9999;">
        Lorem ipsum
    </span>
</a>

しかし、この場合、私が思うに、<span>要素をブロックに変換することは有効ではなく、ブラウザーで違いが生じる可能性があります。

これについての経験はありますか？

4

2 に答える 2

4

4.01 仕様では、基本的に、アンカー要素 (またはすべてのインライン要素) はブロック レベルの子を持つことができないため、取ろうとしているアプローチは有効ではありません。もちろん、それを行うことはできます (スパン アプローチは、互換性と検証する必要があるため、より優れています) が、それが重要な場合はセマンティックではありません。

于 2012-10-29T15:59:11.740 に答える
3

画像置換を使用してh3テキストを画像リンクにしようとしているようですよね？http://jsfiddle.net/QKtWq/2/をご覧ください

HTML：

<h3>
  <a href="#" title="Click me!">Lorem ipsum</a>
</h3>

CSS：

h3 {
    background: black url('http://jsfiddle.net/img/logo.png') no-repeat;
    text-indent: -9000px;
    height:100px; /* usually set to the height of the image */
}
h3 a {
    display:block;
    height:100%;
}

100％にしたくない場合は、h3に特定の幅を設定することもできます。

編集：h3 cssからdisplay：blockを削除しました。ヘッダーはすでにブロック要素です。

于 2012-10-29T16:18:44.327 に答える