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() > 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() > larger) { larger = $(this).height(); } }); if (ua.indexOf("IE 6") != -1) { $('li').height(larger + 10); //ie6だけpadding分高くしてやる } else { $('li').height(larger); } });