1

私は自分のタグを自分のウェブサイトの画像text-indentに置き換えるテクニックを使用しています:<h1/>

<h1 title="Homepage">My logo</h1>

CSS:

#header h1 {
    float: left;
    background: transparent url('../images/logo.png');
    width: 214px;
    height: 64px;
    text-indent: -9999px;
}

唯一の問題は、新しい画像をハイパーリンクとして機能させたいということです。私はやってみました：

<h1 title="Homepage"><a href="#">My logo</a></h1>

しかし、インデントされているので、リンクもインデントされています。これを行う方法について何か提案があり、それでも有効な XHTML であるかどうかを知りたいと思いました。

編集私が読んだことから、スクリーンリーダーを使用しているユーザーがアクセスできるようにしたいのですが、display:none一部のリーダーでは機能しません。

4

4 に答える 4

7

これを行うには多くの方法がありますが、これは私が好む方法であり、うまく機能し、実装も簡単です。

<div id="header">
    <h1><a href="/" title="Homepage">Homepage</a></h1>
</div>

次に、この css を実行します。これは、「Leafy/Langridge 画像置換」メソッドとしても知られています。

#header h1 a {
    display: block;
    padding: 22px 0 0 0;
    overflow: hidden;
    background-image: url(../images/sidebar/heading.png);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:22px;
}

編集する必要があるのはheight、 とだけですpadding-top。この例では です22px。これはイメージの高さに等しくなければなりません。

于 2009-01-29T08:18:20.037 に答える
2

img タグの alt 属性を使用するだけで、負のインデントをいじるのはなぜですか?

<h1 title="Homepage><a href="#"><img src="images/logo.png" alt="My logo"/></a></h1>
于 2009-01-29T07:55:22.813 に答える
2

@Partrik Hägne:display:none一部のスクリーン リーダーはそれを無視するため、使用しないでください...

http://css-tricks.comで、CSS 画像置換のための 9 つのテクニックのリストを参照できます。このリストでは、各ソリューションの長所と短所が説明されています。

于 2009-01-29T08:03:33.420 に答える
0

できることは、インデントを削除することです。代わりにスパンを使用して非表示にします。

<h1 title="Homepage"><a href="#"><span>My logo</span></a></h1>

#header h1 span
{
  display: none;
}

このトリックを使用しても何も満たされないため、A タグの幅と高さも設定する必要がある場合があります。

于 2009-01-29T07:49:49.907 に答える