16

cssスプライト（スプライト画像の全幅：45px、全高：15pxは3つの画像で構成されています）が欲しいのですが、IE9/8/7に問題があります。リンクとホバーは機能しますが、ボタン（アクティブ）をクリックすると、スプライト画像が左に1pxスライドします。IE 9/8/7のみの問題です。これを修正するにはどうすればよいですか？

CSS：

body{
    margin:0;
    padding:0;
}

.button{
    background:url(sprite-image.png) no-repeat 0 0;
    width:15px;
    height:15px;
    cursor:pointer;
}

.button:hover{
    background:url(sprite-image.png) no-repeat -15px 0;
}

.button:active{
    background:url(sprite-image.png) no-repeat -30px 0;
}

.cont{
    width:200px;
    height:200px;
    float:left;
    margin:50px 0 0 100px;
}

HTML： 

 <body>
  <div class="cont">
     <div class="button">&nbsp;</div>
  </div>
 </body>

「リンク」と「ホバー」と「アクティブ」FF、Chrome、Safari、Operaはこのようになります。

ここに画像の説明を入力してください

しかし、IE9/8/7アクティブは次のようになります。

ここに画像の説明を入力してください

見栄えを良くするために上の画像を具体化しました。私のスプライト画像。

ここに画像の説明を入力してください

4

6 に答える 6

8

IE 条件付きコメントを使用しない理由。

 <!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

そして、例えば のような CSS ルールを書きます。lt-ie9 .someclass{}IE バージョンをターゲットにします。私はそれらを使用して、IE 固有の css-stuff を修正します。汚いハックも、css だけの煩わしさもありません。たとえば Firebug Lite で何が起こるか確認しましたか?! 概要: 0 なし?

于 2012-12-28T22:36:09.837 に答える
3

Internet Explorer 固有のスタイルシートを<head></head>セクションに追加します。

<!--[if lt IE 9]>
<link rel="stylesheet type="text/css" href="/css/ie.css" />
<![endif]-->

そして次のie.cssようなことをします：

.button:active{
    background:url(sprite-image.png) no-repeat -29px 0 !important;
}

( ie 、 phew には常に問題があります!)

于 2012-12-25T12:58:32.850 に答える
3

私はあなたのグラフィックを使用して偽のスプライトを作成し、あなたが見ているものを確認しましたが、すべての IE 7-9 で私のフィドルで見栄えがよくなりました (位置を変更して、それを説得力のある (少ない) にしたことに注意してください:

http://jsfiddle.net/Riskbreaker/Rr8p2/

body{
    margin:0;
    padding:0;
}

.button{
    background:url(images/sprite.png) no-repeat 0 0;
    width:14px;
    height:15px;
    cursor:pointer;
}

.button:hover{
    background-position:0px -27px;
}

.button:active{
    background-position:0px -27px;
}

.cont{
    width:200px;
    height:200px;
    float:left;
    margin:50px 0 0 100px;
}

調整できるように、私が作成した位置を覚えておいてください。以前にアクティブな IE の問題が発生したことはありません...しかし、あなたが見ているものを教えてください....問題が解決せず、別のファイルが必要ない場合は、次のようにします。

IE7: *.button:active{background-position:0px -28px;}(または正しい位置が何であれ)...

IE8: .button:active{background-position:0px -28px\9;}..........

IE9 ....最新かどうかはわかりませんが、問題はないはずです（最新）

于 2012-12-28T02:15:09.473 に答える
3

以前にIE8で同様の問題に直面したことがありますが、私の場合、IE9は問題なく機能しました（IE7についてはわかりませんが、このことについてはIE8のようでなければなりません）。

次の 2 つのアプローチのいずれかで解決/改善できます。

1) 画像を変更し (おそらく解像度、色の組み合わせなど)、うまくいくか試します。なぜこれがうまくいくのでしょうか？あなたの例では、IEはいくつかの画像操作を「インテリジェントに」実行しようとしているように見えるため、残念ながら(特に小さな画像/ピクセルパーフェクトの場合)時々うまくいかず、新しい画像でひどく失敗しないことを願っています.


2) 0.5px単位の背景位置精度を使用します。

次のコードの「 background-position: -15.5px 0; 」に    注意してください。このソリューションは、あなたのフラストレーションを少なくとも 50% 軽減します :-) 残念ながら、このソリューションには IE 固有の CSS を提供する必要があるかもしれませんが、それで問題ありません... JavaScript を使用してタグにブラウザー識別子クラス名を追加するか、 @ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/で言及されている手法を使用して、ブラウザー固有の CSS を記述するときにこれらのクラス名を使用します。

ソリューション：

.button {
    background:url(images/sprite.png) no-repeat 0 0;
    width: 15px;
    height: 15px;
    cursor:pointer;
}

.button:hover {
    background-position: -15.5px 0;
}

.button:active {
    background-position: -30px 0;
}

.cont {
    width: 200px;
    height: 200px;
    float: left;
    margin: 50px 0 0 100px;
}
于 2013-01-01T06:17:28.347 に答える
2

css で次の変更を試してください。

.button{
    background: url(sprite-image.png) no-repeat left 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.button:hover{
    background: url(sprite-image.png) no-repeat center 0;
}
.button:active{
    background: url(sprite-image.png) no-repeat right 0;
}
于 2012-12-27T15:05:13.017 に答える