Tło CSS obraz nie pokazując w IE7 tylko

Question

HTML jest:

<div class="choose-os"> 
<p> 
    <a href="someLink" class="windows">Microsoft Windows</a> 
    <a href="someOtherLink" class="macos">Apple Mac OS</a> 
</p> 
</div> 

CSS jest:

.choose-os { 
    margin: 20px 0; 
    padding: 20px; 
    background: #e7eefa; 
} 
.choose-os p { 
    margin: 0; 
} 
.choose-os p a { 
    display: inline-block; 
    text-indent: -100000px; 
    height: 56px; 
    width: 308px; 
} 
.choose-os p a.windows { 
    background: url(../images/button-windows-bg.png) 0 0; 
} 
.choose-os p a.macos { 
    background: url(../images/button-macos-bg.png) 0 0; 
} 
.choose-os p a:hover { 
    background-position: 0 -56px; 
} 

Wszelkie sugestie będą bardzo mile widziane, aby mieć obraz w tle pojawiają się również na IE7.

Answer 1

text-indent: -100000px; w połączeniu z inline-block powoduje, że oba elementy nie są widoczne w IE7 z powodu błędu.

Musisz znaleźć inny sposób na ukrycie tekstu dla IE7 (lub nie używać w ogóle inline-block, patrz poniżej dla tej bardziej odpowiedniej poprawki).

Opcje obejmują metodę w komentarzu lub poprzez @Sotiris:

.choose-os p a { 
    display: inline-block; 
    height: 56px; 
    width: 308px; 

    text-indent: -100000px; 

    /* for ie7 */ 
    *text-indent: 0; 
    *font-size: 0; 
    *line-height: 0 
} 

który wykorzystuje *property: value włamać się kilka razy, aby ukryć tekst w IE7.

---

Problem wydaje się być związany z użyciem display: inline-block.

Więc kolejny obejście (które Wolę mój poprzedni) wynosi:

.choose-os { 
    margin: 20px 0; 
    padding: 20px; 
    background: #e7eefa; 
    overflow: hidden 
} 
.choose-os p a { 
    float: left; 
    margin-right: 4px; 
    text-indent: -100000px; 
    height: 56px; 
    width: 308px; 
} 

Answer 2

IE7 ma pewne poważne ograniczenia w CSS. Zalecałbym unikanie notacji skróconej i jawne deklarowanie każdej właściwości, a następnie sprawdzanie arkusza CSS here.

Answer 3

Aby wyświetlić inline-block prawidłowo w IE7, należy dodać następujące style .choose-os p a

zoom:1 
*display:inline 

(Gwiazda jest ważna! To ignorowane przez współczesnych przeglądarek, ale nie IE6/7)

IE7 nie robi szanuj blok inline, więc musisz zrobić trochę magii, aby to zadziałało. Jest to świetny opis tutaj: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

[edit] Jeśli text-indent jest również częścią sprawcy, może być lepiej trzyma się display:block i ustawienie float:left na swoich elementów. Prawdopodobnie wiele ważnych ścieżek do zrobienia :)