jQueryでline-height値を取得する時、IEだけ返り値が違う
とあるCSSで
これで、IEでも期待する値「24」が返ってくる、はず。
上記スクリプトは、JavaScriptでUserAgentによるブラウザ判定「if.useragent.js」v0.9 | みやなび | 宮古島 ホームページ制作 広告代理店より拝借した。深謝。
ie6〜8のとき変数getStyleがあるのは、jQuery を利用して1行の高さ(line-heigt)を取得する: JavaScriptメモを参考にした。深謝。
最終的なline-heightの値は、Math.round関数にて小数点以下四捨五入で丸めてある。
body {
font-size: 12px;
line-height: 2;
}
と指定し、jQueryにてline-heightの値を取得する時、var lineHeight = parseFloat($("body").css("line-height"));
とすると、通常「24」と、font-size*line-height
が内部計算された数値が返される(parseFloatは文字列を数値に変換する関数。parseFloat関数なしだと「24px」と単位付きの文字列が返される)。しかし、IEではCSSでline-heightに指定した値「2」がそのまま返されて他のブラウザと異なる結果となり非常に困る。それ故ブラウザ判別のスクリプトが必要になる(ホンマにメンドイ)。var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
if (userAgent.indexOf('msie') != -1) {
if (appVersion.indexOf('msie 6.') != -1) { //ie6のとき
var getStyle = $("body")[0].currentStyle || document.defaultView.getComputedStyle($("body")[0], '');
var lineHeight = getStyle.lineHeight*parseFloat($("body").css("font-size"));
var bHeight = Math.round(lineHeight)
} else if (appVersion.indexOf('msie 7.') != -1) {//ie7のとき
var getStyle = $("body")[0].currentStyle || document.defaultView.getComputedStyle($("body")[0], '');
var lineHeight = getStyle.lineHeight*parseFloat($("body").css("font-size"));
var bHeight = Math.round(lineHeight)
} else if (appVersion.indexOf('msie 8.') != -1) {//ie8のとき
var getStyle = $("body")[0].currentStyle || document.defaultView.getComputedStyle($("body")[0], '');
var lineHeight = getStyle.lineHeight*parseFloat($("body").css("font-size"));
var bHeight = Math.round(lineHeight);
} else if (appVersion.indexOf('msie 9.') != -1) {//ie9のとき
var lineHeight = parseFloat($("body").css("line-height"))*parseFloat($("body").css("font-size"));
var bHeight = Math.round(lineHeight);
} else if (appVersion.indexOf('msie 10.') != -1) {//ie10のとき
var lineHeight = parseFloat($("body").css("line-height"))*parseFloat($("body").css("font-size"));
var bHeight = Math.round(lineHeight);
}
}else{//ie以外
var lineHeight = parseFloat($("body").css("line-height"));
var bHeight = Math.round(lineHeight);
}
これで、IEでも期待する値「24」が返ってくる、はず。
上記スクリプトは、JavaScriptでUserAgentによるブラウザ判定「if.useragent.js」v0.9 | みやなび | 宮古島 ホームページ制作 広告代理店より拝借した。深謝。
ie6〜8のとき変数getStyleがあるのは、jQuery を利用して1行の高さ(line-heigt)を取得する: JavaScriptメモを参考にした。深謝。
最終的なline-heightの値は、Math.round関数にて小数点以下四捨五入で丸めてある。
コメント
コメントを投稿