1

この問題は説明が少し難しいです。

PNG スプライトを使用して 48x48px のアイコンを作成し、クラスごとに背景をシフトしています。

例えば、

<style>

div.icon {
    width:48px;
    height:48px;
    background: url(../img/48sprite.png);
}

.cart { background-position: -96px -336px; }
.sale { background-position: -96px -384px; }
.bino { background-position: -96px -432px; }

</style>

(さまざまなアイコンに対して、これらの背景位置シフト クラスがさらに 35 ほどあります。)

<div class="widelist">

<div class="widelist-itemwrap">

<div class="icon bino left"></div>

  <div class="widelist-content left">
    <h4>Widelist Heading</h4>
    <p>Widelist content</p>
  </div>

</div>

</div>

問題は、bino、sale、cart、またはその他の 36 個のアイコンを Icon クラスの後の 2 番目のクラスとしてスプライトに配置しても、PNG ファイルの 0px、0px にある背景画像を取得するだけです。 .

奇妙な点は、Dreamweaver のデザイン ビューで完全に表示されることですが、Chrome/Safari などでライブ ビューまたはプレビューに移動するとすぐに、アイコンがシフトされるのではなく、すべてデフォルト アイコンに切り替わります。

Chrome の開発者ツールは、background-position プロパティが適切にシフトされていることを示していますが、視覚的にはアイコンが正しくありません。

明確にするために、私はこれまで何度もこの手法を問題なく使用してきました-ただ悪い日を過ごしただけです.

何か案は？

4

1 に答える 1

3

問題は、div.iconより具体的です.bino。

backgroundルールは (とりわけ)background-positionプロパティの省略形であるため、onbackgroundプロパティdiv.iconは異なるbackground-positionルールの適用を妨げています。

div.iconjustに変更することで修正できます.icon。

于 2011-04-11T04:31:47.410 に答える