2009年06月29日

xml宣言をする事による、jsでの不具合

結果だけ見ると、なんて事ないのですが、ハマったのでメモ。

例えば、こんなソースです。

<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
//略
<style type="text/css">
li {
    float: left;
    padding-bottom: 10px;
}
</style>
</head>
<body>
<ul>
    <li>テキスト<br />テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>
</body>
</html>

このソースで、リスト要素の高さを揃えたいので、jQueryでこういう記述をしてみます。

$(function(){
    var larger = 0;
    $('li').each(function(){
        if ($(this).height() &gt; larger) {
            larger = $(this).height();
        }
    });
    $('li').height(larger);
});

こうすると、FireFoxでは動きます。xml宣言したie6で動きません。
なぜかというと、ie6で算出したheightの値はcssのpaddingの設定を含んじゃってるんですね。
揃えようとして一番大きいheightを持ってきてるハズなのですが、肝心なそのheightがpaddingの分少なく算出されちゃってます。
リストのheightは10px少ない高さで実装されるのですが、ie6の場合、内包しているものの高さがheightを超えると自動的にheightを拡張してしまいます。
その結果、一番高い要素だけ、padding分高くなってしまいます。

結局こう実装しました。

$(function(){
    var larger = 0;
    var ua = navigator.userAgent;
    $('li').each(function(){
        if ($(this).height() &gt; larger) {
            larger = $(this).height();
        }
    });
    if (ua.indexOf(&quot;IE 6&quot;) != -1) {
        $('li').height(larger + 10);    //ie6だけpadding分高くしてやる
    } else {
        $('li').height(larger);
    }
});