Internet Explorer - problem z inputem

Po raz kolejny IE mnie zaskoczył. To, że jest niezgodny z wszelkimi standardami to wiadomo nie od dziś. Że style różnią się w każdej przeglądarce - normalka. Jednak problem na jaki napotkałem nie udało mi się rozwiązac jedynie stylami. Chodzi o obrazek w tle inputu. Bardzo często spotykamy input z ikonką lupy (tradycyjny search), czy ikonką error itp. Rozwiązać to można nakładając na input odpowiednie style. Np. takie:

.inpSearch {
padding: 0px 0px 0px 20px;
background-image: url('icon_mini_search.gif');
background-position: 0% 50%;
background-repeat: no-repeat;
background-color: #ECECEC;
border-style: solid;
border-color: #484848;
border-width: 1px;
}

Oto efekt:

Wszystko pięknie, ładnie, dopóki nie otworzymy tego pod naszą ulubioną przeglądarką - IE :) Okazuje się, że po wpisaniu w inpucie ciągu znaków dłuższego od szerekości inputu - ikonka lupy zacznie poruszać się wraz z tekstem, aż w końcu zniknie. Cóż za wspaniała funkcjonalność! W każdym razie po godzinach googlania doszedłem do wniosku, że jedyne słuszne rozwiązanie, to wrzucić inputa do labela. Od początku mi się to nie podobało, bo chciałem to załatwić stylami, jednakże nie miałem już siły próbować kolejnych zaskakujących kombinacji styli pod IE i Mozillą (najlepsze co odkryłem - oczywiście pod IE - to że przy odpowiednim ułożeniu inputów i po nałożeniu na jeden z nich stylu height - ten nieoczekiwanie się rozszerza, tak jakbym dał width!).
A tak wygląda rozwiązanie, które działa pod Mozillą i pod IE: na label nakładamy te same style, co wcześniej na input, a na input dajemy to:

.inpSearch {
background-color: #ECECEC;
border-width: 0px;
}

I teraz już będzie w porządku także pod ulubionym IE:



A i jeszcze tak mi się przypomniało - żarcik informatyczny na koniec:
- Do czego służy nam Internet Explorer?
- Jest nam niezbędny do ściągnięcia odpowiedniej przeglądarki.

Niby żarcik - ale jaki prawdziwy ;)