4

前景画像でのスプライトトリックを可能にするcssスプライトの拡張に関するこの記事に出くわしました。：hoverでこの手法を使用しようとしましたが、IEとOperaでは機能しないようです。ここでメニューにこのテクニックを使用する私の試みを参照してください：http ：//www.kavoir.com/examples/jenny-css-sprites/menu.html

FFとSafariでは正しく動作しますが、IEとOperaではまったく動作しません。いくつかの方法でコードを変更しましたが、それでもまったく機能しません。多分それは不可能ですか？

著者に尋ねようとしましたが、彼女は私のコメントを削除しました。

これをすべてのブラウザで機能させる方法はありますか？

更新：回答ありがとうございますが、：hoverはのためのものなので、すべてのIEブラウザーが効果を解決するはずです。したがって、問題はおそらくクリップのプロパティにある可能性があります。

：hoverがクリップオンで正しく機能するかどうかを確認したいだけです。今のところ表示されていません。

4

5 に答える 5

4

説明されているテクニック全体は私には問題があるようです。

ジェニファーのポイント：

  1. アクセシビリティの目的でdivに代替テキストを添付することはできません
  2. CSSSpritingとIE6PNG修正は互換性がありません
  3. 背景画像を印刷するクライアントオプションが選択されていない限り、画像は印刷物に印刷されません（これはロゴやメニューなどに適していません）
  4. ページ内の画像（実際には背景画像ではない）の場合、CSSで画像を非表示にすることは意味的に悪いようです。

1では、これらは背景画像であり、それ自体が意味的な画像ではないことを考えると、正しいアプローチは、その逆ではなく、そのテキストをマークアップに直接配置し、CSSで非表示にすることだと思います。

番号2は有効ですが、世界の終わりではありません。3に基づいて行動することは、悪用です。ユーザーが背景画像を印刷したくない場合、なぜこれを強制するのですか？繰り返しますが、これは意味解釈に戻ります。

番号4私は完全に同意しますが、とにかくスプライトされた画像の集合体に画像を隠しているだけの場合、何が得られますか？これについて議論することもできますが、an<img>には、URIを使用してリソースを表す意味があり、解釈されたCSSに依存せずに、URIを区別する必要があります。画像の表示/コピー/保存は、これによって悪影響を受けます。

また、私のFF（確かにタブの乱用の対象です）では非常にゆっくりと反応するようです。クリッピングの計算は、無視できないほどの努力をしていると思います。

簡単に言えば、既存の背景画像/位置技術が優れていると思います。

于 2009-01-12T15:34:34.897 に答える
1

使用しているIEのバージョンは何ですか？

:hover古いIEでは動作しないはずです（IE7はこの疑似クラスをサポートするはずです）。

この記事「IECSSホバー修正:hover」では、IE独自の式関数やHTC（HTMLコンポーネント）など、正しく実行するために使用されるいくつかの手法をリストしています。

于 2009-01-12T07:45:07.200 に答える
1

実際、IEはリンクの：hoverをサポートしています。ここでの問題は、「Clip」cssプロパティの使用にあると思います。別の解決策を探すことをお勧めします。これは一般的な方法であり、別のアプローチを試すには、デバッグに時間がかかる可能性があります。

于 2009-01-12T07:49:57.830 に答える
0

A タグ内の IMG 子タグなしで CSS スプライトを通常作成する方法を次に示します。

HTML:

<div class="menu">
    <a href="#">foo</a>
    <a href="#">foo</a>
</div>

CSS:

/* you need to specify its height and width so that they fit with the part of the sprite you want to show */
.menu a{display:block;width: 100px; height: 100px; float:left; margin-right: 10px; text-indent: -9999px;}
/* the background-position is set to top. */
.menu a{background: url(../images/whatever.png) no-repeat top center;} 
/* the background-position is set to bottom. */
.menu a:hover{background-position: bottom center;}

あなたのwhatever.pngファイルは、両方の状態で高さが200pxになります。

それでおしまい

于 2009-01-14T18:18:20.243 に答える