IE9/8/7 css-sprite-position Rutsch-Problem

Ich möchte css-sprite (sprite-Bild total width:45px und total height:15px besteht aus drei-Bild), aber es gibt ein problem in IE9/8/7. link und hover arbeiten, aber wenn Sie auf die Schaltfläche (active) sprite Bild rutscht nach Links 1px. Problem nur für IE 9/8/7.Wie kann ich dieses Problem beheben?

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>

"link" und "hover" und "active" FF,Chrome,Safari,Opera wie diese;

IE9/8/7 css-sprite-position Rutsch-Problem

aber IE 9/8/7 aktiven wie folgt Aussehen;

IE9/8/7 css-sprite-position Rutsch-Problem

Ich konkretisiert oben Bilder zu machen es besser Aussehen . Mein sprite;

IE9/8/7 css-sprite-position Rutsch-Problem

Habe das gleiche Problem, auf :link und :hover funktioniert gut, aber auf :active nicht ( funktioniert normalerweise in jedem browser außer dem IE). Weiß nicht, warum. Ich fixe es so link .
Liebe, du bitte geben Sie mir die sprite-image, so kann ich daran arbeiten und Ihre Probleme lösen. Geben Sie mir so schnell wie möglich...
Ich Frage bearbeitet, das sprite-Bild wie oben
Sie wissen, ob ein pixel ist das einzige problem, das Sie haben, können Sie Bearbeiten Sie Ihre sprite, haben nur wenige Pixel auf jedem Bild... nur für den Fall, gibt es keine genauen Antworten im Leben 🙂
Sie wollen hören, eine traurige Sache? Ich lief einfach den code in die fiddler unter IE9, und es funktioniert Prima! was ist der DocType in Ihrem HTML?
Dies ist nur eines der sprites, es gibt eine Menge von sprites und dem problem für meine bisherigen Projekte. Ich will nicht alle Bearbeiten von sprite-Bildern für DH ich versuche das problem zu lösen mit css. Ich als doctype; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sind Sie sicher, dass es keinen Dritten browser sensible styles zusätzlich, die Sie geschrieben? hier ist schnelle Prototyp jsbin.com/agavol/1 basierend auf Ihre Daten und alles ist glatt in jeder IE
Ich denke, Sie sollten versuchen, die <!DOCTYPE html> zunächst, bevor Sie versuchen, irgendwelche anderen tricks

InformationsquelleAutor midstack | 2012-12-25

8

Warum nicht IE-conditional comments;
```
 <!doctype html>





 <html class="no-js" lang="en"> 
```
Und dann schreiben z.B. CSS-Regeln wie .lt-ie9 .someclass{}Ziel einer IE-version. Ich benutze Sie, um zu beheben einige IE-spezifische css-Zeug. Keine schmutzigen hacks, keine hastle nur css. Haben Sie mit zB Firebug Lite, was passiert?! outline: 0 none?
- Ich mag dieses, aber in diesem Fall das laden der Seite drei verschiedene CSS, die ist nicht gut zu fix für ein Problem.
- Es gibt keinen Weg, um andere als die bedingte Kommentare, die ich denke. Danke Euch allen für hilft
InformationsquelleAutor myradon
3

Fügen Sie einen Internet-explorer-spezifischen Stylesheets zu den <head></head> Abschnitt.
```

```
und in ie.css etwas wie:
```
.button:active{
    background:url(sprite-image.png) no-repeat -29px 0 !important;
}
```
(Es gibt Immer ein Problem mit dem ie , Puh !)
- Gelöst werden können Sie nur mit speziellen css?Gibt es nicht einen anderen Weg?
- eine andere Lösung könnte sein, nochmal die sprites Bild und mehr als 1px Abstand zwischen den Bildern
- Es ist wohl Wert, indem die zusätzliche Raum zwischen sprites sowieso, da das Zoomen in andere Browser können auch dazu führen, den sprite zu verschieben, so dass die benachbarten Bild blutet durch.
InformationsquelleAutor Amyth
3

Ich erstellte einen fake-sprite mit Ihrer Grafik, um zu sehen, was Sie sehen, aber gut Aussehen in meinem fiddle in allen IE 7-9 (Hinweis: ich habe gerade die Positionierung und machte es construsive (weniger):

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;
}
```
Denken Sie daran, die Positionierung, die ich gemacht, so können Sie anpassen. Ich hatte nie das aktive IE-Problem vor...aber lassen Sie mich wissen, was Sie sehen....wenn das Problem weiterhin bestehen und Sie nicht möchten, dass eine andere Datei, tun Sie dies:

IE7: *.button:active{background-position:0px -28px;} (oder was auch immer der richtigen position ist )...

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

IE9....nicht sicher, ob Ihr die Letzte sollte es aber keine Probleme (neueste)

InformationsquelleAutor Riskbreaker
3

Habe ich vor ähnlichen Problemen mit IE8 vor, aber IE9 funktionierte gut in meinem Fall (nicht sicher über den IE7, aber es muss, wie IE8 für dieses Ding).

kann Es werden behoben/verbessert kann durch eine der folgenden 2 Methoden:

1) Ändern, das Bild (vielleicht in Auflösung, Farbe, Kombination, etc.) und versuchen, ob es funktioniert. Warum das funktionieren könnte? Weil in deinem Beispiel IE angezeigt wird, versuchen zu tun, einige Bild-Manipulationen "intelligent", was leider schief gehen, manchmal (vor allem für kleine Bilder/pixel perfect Fällen) und man kann nur hoffen, dass es nicht nicht schlecht für Ihre neuen Bilder.

2) mit background-position Genauigkeit von 0.5 px Einheiten.

Hinweis: "background-position: -15.5 px 0;" den folgenden code). Bei dieser Lösung reduzieren Sie Ihre frustration von mindestens 50% 🙂 ich fürchte, dass Sie möglicherweise angeben müssen IE-spezifische CSS für diese Lösung, aber das sollte in Ordnung sein ... Sie können den browser-identifier-Klasse name-tag mit JavaScript oder mit der Technik erwähnt @ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ und dann diese Klassen-Namen, wenn Sie schreiben browser-spezifischen CSS.

Die Lösung:
```
.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;
}
```
- Sie können die Verwendung der nachstehend trick, die helfen, zu geben, manuellen Wert ---------- Für den IE7 (der Unterstrich vor dem Wert) .button:hover { background-position: _-15.5 px 0; } Oder IE-7 & IE-8(hinzufügen\9) .button:hover { background-position: -15.5 px\9; } Für IE8only (\0/) *+.button:hover { background-position: -15.5 px\0/;}
InformationsquelleAutor webextensions.org

Können Sie unter trick, der hilft, geben Sie manuell den Wert

Für IE7 (Unterstrich vor dem Wert)

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

Bzw.
IE-7 & IE-8(hinzufügen\9)

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

Für IE8only (\0/)

*+.button:hover {
    background-position: -15.5px\0/;
}

InformationsquelleAutor The AV

Versuchen, diese änderung in der 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;
}

Keine chance zu bekommen ein Turnschuh? Ich versuche: jsfiddle.net/Riskbreaker/Rr8p2 scheint aber gut zu funktionieren.

InformationsquelleAutor karacas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.