IE 7 und 8 Hintergrundbild Position Ausgabe

Question

Wieder, IE 7 und 8 CSS Herausforderung.

Ich habe ein Hintergrundbild verwendet, um den gesamten Hintergrund der Schaltfläche in der Webseite anwenden.

Hier ist ein HTML-Code

<span class="primary-action message-post"><a href="/t5/forums/postpage/board-id/About" id="link_29" rel="nofollow" class="lia-button lia-button-primary"><span>New Message</span></a></span> 

Im folgenden wird meinen CSS-Code:

#lia-body .lia-content .primary-action 
{ 
    overflow:visible; 
} 

#lia-body .lia-content .primary-action .lia-button-primary 
{ 
    background-image: url("/html/assets/buttons_tcm166-1588.png"); 
    background-position: 100% 0; 
    background-repeat: no-repeat; 
    color: #FFFFFF; 
    display: block; 
    line-height: 20px; 
    padding: 0 22px 1px 22px; 
    white-space: nowrap; 
    border: none; 
    font-weight: bold; 
    overflow:visible; 
} 
#lia-body .lia-content .primary-action .lia-button-primary:hover 
{ 
    background-image: url("/html/assets/buttons_tcm166-1588.png"); 
    background-position: 100% -30px; 
    background-repeat: no-repeat; 
    color: #FFFFFF; 
    display: block; 
    line-height: 20px; 
    padding: 0 22px 1px 22px; 
    white-space: nowrap; 
    border: none; 
    font-weight: bold; 
} 

In Firefox und Chrome ich den perfekten Ausgang.

Wenn wir die IE 7 und IE 8 aussehen, schneidet sie linken Teil ab.

Irgendwelche Tipps, dank

Grüße, Qing

Answer 1

Versuchen Sie folgendes: (nur die Anzahl der Klassen usw. zu reduzieren ...) Wenn es um den Fehler in der anderen Definitionen funktioniert dann verfolgen ..

.

<span><a href="/t5/forums/postpage/board-id/About" id="link_29" rel="nofollow" class="lia-button-primary"><span>New Message</span></a></span> 


.lia-button-primary { 
    background-image: url("/html/assets/buttons_tcm166-1588.png"); 
    background-position: 100% 0px; 
    background-repeat: no-repeat; 
    color: #FFFFFF; 
    display: block; 
    line-height: 20px; 
    padding: 0px 22px 1px 22px; 
    white-space: nowrap; 
    border: none; 
    font-weight: bold; 
    overflow:visible; 
} 
.lia-button-primary:hover { 
    background-image: url("/html/assets/buttons_tcm166-1588.png"); 
    background-position: 100% -30px; 
    background-repeat: no-repeat; 
    color: #FFFFFF; 
    display: block; 
    line-height: 20px; 
    padding: 0px 22px 1px 22px; 
    white-space: nowrap; 
    border: none; 
    font-weight: bold; 
} 

Die Fragmente des Codes vorausgesetzt, Sie arbeiten gut für beide Versionen von IE ...

---

Origional Antwort:

Prüfen Sie die Nachricht-Post-Klasse, um zu sehen, ob das Problem dort liegt ...

Und FYI aktualisieren:

padding: 0px 22px 1px 22px; 

    background-position: 100% 0%;