Microsoft znowu robi po swojemu…

Mam wrażenie, że Microsoft zawsze stara się o to bym o IE myślał: „IE is stupid!”…

No cóż…

Do rzeczy!

IEMobile nie zwraca wartości obliczonej?

Niestety tak jest zaimplementowane. Dziwne, że w developerzy jQuery nie dodali jakiegoś sposobu, by po złapaniu elementu była zwracana wartość obliczona właściwości line-height. Wielce byłem zaskoczony, gdy zamiast konkretnej wartości dostałem dokładnie to co w stylach wpisałem. Używam bez jednostkowych wartości dla line-height i takową mi zwrócił nim poprawiłem ten „błąd”.

Naprawiamy!

Potrzebowałem wysokość paragrafu, zatem napisałem funkcję za to odpowiedzialną, a że najlepszą moim zdaniem właściwością do tegoż zadania jest line-height, to natrafiłem na błędnie pobieraną przez IEMobile wartość.

countHeightOfParagraph = function() {
    var
        $paragraph,
        lineHeight,
        getLineHeight;

    $paragraph = $(".mod_comments_list > .body li:first-child .body p");

    if ($.browser.msie) {
        getLineHeight = function (element){
            var
                temp,
                ret;

            temp = document.createElement(element.nodeName);

            temp.setAttribute("style","margin:0px;padding:0px;font-family:" + element.style.fontFamily + ";font-size:" + element.style.fontSize);
            temp.innerHTML = "test";
            temp = element.parentNode.appendChild(temp);
            ret = temp.clientHeight;
            temp.parentNode.removeChild(temp);

            return ret;
        };

        lineHeight = getLineHeight($paragraph.get(0));
        (lineHeight, "line-height");
    } else {
        lineHeight = $paragraph.css("line-height");
    }

    return parseInt(lineHeight, 10);
};

Co się tutaj dzieje? Troszkę zagmatwana sprawa… Jak jQuery nam powie, że ma się do czynienia z IE, wtedy implementuje się kod funkcji getLineHeight(). A ta spryciara kopiuje na moment złapany przez jQuery paragraf (<p/>), kopiuje style do tegoż elementu tymczasowego i w finale zwraca clientHeight. Wiem! Straszne, ale działa :-D!

Kod funkcji getLineHeight() zerżnąłem z wątku JavaScript: Find DIV’s line-height, not CSS property but actual line-height ;-).

Konkluzja

IE jest głupie, nawet te w wersji mobilnej… Miało być pięknie i raczej długo nie będzie. Może z nadejściem IE10 i kuzyna na mobilach będzie coś lepiej. Szczerze? Wątpię w to! Zawsze, ale to zawsze Microsoft obierał dziwne ścieżki. Jedyne za co mogę ich chwalić w kwestii IE, to obiekt XHR. Bez tego frontend byłby nudny. No, całkiem możliwe, że prędzej czy później by ktoś XHR’a wymyślił. Tego raczej się nie dowiemy nigdy. Zasługa jest Microsoft’u! Dzięki Wam chopy :-D!