22

CSS スプライトでは、各画像の間にパディングが見られることがよくあります。ページのサイズが変更された場合に、ある画像が別の画像に流れ込まないようにするためのアイデアだと思います。

これは、さまざまな種類のブラウザ ズームに依存すると思います(Jeff が最もよく説明しています)

ただし、テストではこの動作を確認できませんでした。これは古いブラウザだけの問題ですか? (現時点ではIE6でテストできていないので、「古い」と数えています)。

スペースを残すことについてまだ心配する必要がありますか? そのような痛み。

例えば ​​:

AOL 用に見つけた CSS スプライトには、各画像の間にパディングがあります: VIEW

しかし、デイリーショーは気にしないことに決めました : VIEW

4

4 に答える 4

16

パディングする必要はありませんが、ズームすると、特に IE8 (RC よりもベータ版) では、パディングがないと画像がにじみます。

最良の例は、Google.com -> 検索、およびズームに移動することです...ズームが上下に切り上げられると、画像の右下に「下線」が表示され始めます。

理論的には、スプライトのすべての側面の 1 ピクセルのパディングは問題ないはずです。

これがGoogleのスプライトです(画像)...

代替テキスト

ただし、ズームすると、+、-、x アイコンがメインの Google ロゴに流れ込みます。

代替テキスト

于 2009-03-15T00:08:02.683 に答える
5

基本的に答えはイエスです。この質問をしてから 2 年後に IE9 がリリースされます。IE9 にも同様の問題があります - 他のどのブラウザよりも多くないにしても...

修正するのはとても簡単なことなので、かなり腹立たしいです。

iPad の市場シェアが増加しているため、不均一な量をズームすることについて、少なくとも半分はまともな経験を積むことが非常に重要です。

隣接する要素の背景色と一致するように、すべての画像の周りに単一のピクセル境界線を配置する必要があります (両側で異なる可能性があります)。幸いなことに、私はすべての csssprites を .xml ファイルに基づいて自動生成します。そのため、面倒なことをせずにプログラムでこれを行うことができます。それでもかなりの激痛ですが…

于 2011-03-12T07:07:01.243 に答える
3

Simon - 私の経験では、これは確かにまだ問題です。

2 番目の質問への回答として、透明なパディングを使用しないのはなぜですか? (おそらく、あなたはまだ ie6 をサポートしており、これは些細なことではありません。その場合、本当に申し訳ありません)。

于 2011-03-22T05:38:53.093 に答える
1

古いブラウザ(テキストズームを使用しているブラウザ)と言えば、必ずしもパディングは必要ありません。

2つの例の主な違いは、DailyShowスプライトの画像自体にメニュー項目のテキストがすでに含まれていることです。

テキストズームを使用すると、フォントサイズが大きくなるため、AOLメニュー項目が垂直方向に伸びたり、メニューテキストが2行に折り返されたりする場合があります。このような事態に対応するために、これらのアイコンは、にじまないように少しパディングする必要があります。通常、IE6の5つのテキストサイズのいずれでもブリードしないようにするだけです。

Daily Showのメニューには(表示されている)HTMLテキストが含まれていないため、そのサイズはテキストズームの影響を受けません(確かに必要な場合line-height: 0;もあります)。したがって、パディングは必要ありません。

scunliffeがすでに示したように、ページズームを使用するブラウザでは、丸め誤差のために、スプライトに少しパディングを付ける必要がある場合があります。

于 2009-03-27T23:12:26.050 に答える