Jako, że do niedawna stosowałem pewien fajny metatag, bugi w IE8 są dla mnie pewną nowością. Dzisiaj natrafiłem na jeden z nich i chciałbym podzielić się rozwiązaniem problemu. Rzecz dotyczy właściwości background elementów <input type="submit"> oraz <button>.

Na wstępie zaznaczam, ze nie jest to moje rozwiązanie problemu, a rozwiązanie znalezione w sieci, pochodzące z tej strony. Niemniej opiszę je, bo może komuś się przyda wersja po polsku.

Problem dotyczy wyłącznie Internet Explorera (szok!) i wyłącznie w wersji 8 i objawia się tym, że tło ustawione dla elementów <input type="submit"> lub <button> w stanie :active (czyt. po naciśnięciu przesuwa się nieznacznie w lewo i do góry. Wygląda to dość nieładnie, bo niekiedy obrazek tła zostaje po prostu brutalnie ścięty.

Co robić? Z rozwiązań zaproponowanych na wspomnianej stronie polecam zastosowanie internetexplorerowych rozszerzeń CSS, a więc:

#idElementu:active 	{
     -ms-background-position-x: x px;
     -ms-background-position-y: x px;
}

gdzie x to pożądana wartość. W ten oto sprytny sposób w stanie :active obrazek tła zostanie przesunięty wyłącznie w IE8, przy czym przez „przesunięty” należy rozumieć to, że de facto pozostanie na swoim miejscu. Wartość „x” musicie sobie sami dobrać, aczkolwiek np. w moim przypadku zależności z podlinkowanego wcześniej przykładu się nie sprawdziły. Metoda prób i błędów (a co!) wyszło mi odpowiedni 1px i 4px, także kombinujcie.

Wadą tej (ale i innych również) metody jest to, że niestety obrazek tła przesunie się w pewnych sytuacjach, np. przy kliknięciu i poruszeniu myszką, ale przy pojedynczym kliknięciu obrazek pozostanie na swoim miejscu, no a umówmy się, że są to najczęstsze zachowania użytkowników, jeśli chodzi o kontakt z przyciskiem wysyłającym formularz.

Tak czy siak – warto znać to rozwiązanie.

Podobne wpisy: