0

以前は、div内にリンクのあるロゴを保持するために次の構造を持っていました。

    <a href="http://mysite.com">
        <div class="logo"></div>
    </a>

次のCSSを使用します。

    .logo {
        float: left;
        width: 120px;
        height: 24px;
        background: url('logo.png') no-repeat;
    }

DIVを削除して「logo」クラスをA要素に直接適用した場合、それは間違っているか、互換性に問題がありますか？ちょうどこのような：

    <a href="http://mysite.com" class="logo"></a>
4

4 に答える 4

1

これを行うことに何も問題はありません。非ブロックレベルの要素に適用するディメンションのdisplay：blockを追加する必要がありますが、サイトの読み取りとクロールの方法については、問題はありません。

于 2012-11-08T20:12:04.827 に答える
1

いいえ、何も問題はありません。実際には、冗長性の少ないマークアップを使用して、そのようにする方が適切です。

注意すべき他のいくつかのこと：

  • ブロック要素（この場合は）を内部HTML5に配置する以外のDoctypeでは実際には無効です。div<a>
  • <a>SEO /スクリーンリーダーの目的でテキストを内部に配置し、とを使用してテキストを非表示にする必要がありtext-indent:-999pxますoverflow:hidden。暗黙的に設定するのでdisplay:block不要です。float:left
于 2012-11-08T20:12:09.247 に答える
0

これを使用して、imgをブロック要素にすることができます。

 .logo {
        float: left;
        width: 120px;
        height: 24px;
        background: url('logo.png') no-repeat;
        display:block;
    }

そして、他の人が言っているように、背景のあるa-tagを使用するのは安全ですが、通常、私はdivにロゴを配置し、上部にアンカーを配置しています。幸運を ; ）。

于 2012-11-08T20:20:27.447 に答える
0

これは大きなアクセシビリティの問題を引き起こし、最新のアクセシビリティガイドラインのガイドライン1.1であるWCAG2.0に直接違反しています。点字、スピーチ、シンボル、またはより単純な言語。」aCSSが有効で、画像の読み込みが有効になっている場合、要素のコンテンツは空で、背景画像が表示されます。しかし、代替テキストはありません。

また、背景画像の代替テキストを指定することはできません。代わりにコンテンツ画像を使用してください。

<a href="..."><img src="logo.png" alt="ACME"></a>

ここで、「ACME」は、リンクされたページの説明的な名前または略語に置き換えられます。

デフォルトでは、リンクである画像には、リンクテキストと同じ色の色付きの境界線があります。タグまたはCSSで使用border="0"して削除できます。imga img { border: none }

于 2012-11-08T20:33:29.547 に答える