Po raz kolejny musiałem się nawkurzać na beznadzIEjność wiadomo czego i spędzić prawie godzinę na szukaniu rozwiązania. Problem jest następujący: stworzyłem menu na divie, w którym to umieściłem na przemian img oraz inne divy z treścią i z podkładem typu background : url ('...');. W Mozilli oczywiście wszystko pięknie gra bo jakby nie patrzeć obydwa typy obrazków są tej samej wysokości, div je zawierający jest również tej samej wysokości więc nie ma powodów, żeby miało coś nie grać. IE oczywiście się zamotał skutkiem czego dostawił ot tak sobie 2 dodatkowe piksele co spowodowało piękne zawinięcie tła w głównym divie i ogólnie sieczkę. Rozwiązanie wydawałoby się proste: dać background : no-repeat; ale niestety 2 dodatkowe piksele w IE nadal pozostają.

I tu zaczęło się googlanie za tym co zrobić z tymi 2 pikselami. Jak się okazało, problem dość popularny ale rozwiązanie już mniej. W końcu jednak coś mi się udało znaleźć. Jak się okazało, rozwiazaniem problemu IE z obrazkami jest następujący wpis w CSSie dla znacznika img: vertical-align : bottom; No dobrze, odpalone, w IE pięknie już wygląda ale za to Mozilla i Opera się zamotały i obcięły sobie na odmiane dwa górne piksele ze wszystkich obrazków... No to cóż, trzeba zastosować kolejnego, drugiego już hacka, żeby na odmianę poratować niebadzIEwne przeglądarki :) Jakby ktoś był ciekaw ostatecznego rozwiązania to jest takie:

1. img {
2. padding : 0px;
3. margin : 0px;
4. border : none;
5. /* hack na IE i 2px padding od dołu obrazka */
6. vertical-align : bottom;
7. }
9. /* Hack przywracający domyślne ustawienia Mozilli i Operze */
10. div>img {
11. vertical-align : baseline;
12. }

Kategorie: Narzekadła, Webdesign Trackback URL