やむにやまれず

2007年09月11日16:52

by 山崎泰宏

1emが何pxなのか自動的に計算する方法(4)

カテゴリ

JavaScript

• このエントリーをはてなブックマークに追加
• Tweet
• 山崎泰宏sparklegate
• Comment(0)
• Trackback(0)

普段は未だにWindows 2000を使っているのですが、最近新しく買ったノートPCがVistaだということもあって、今作っているWebアプリケーションをIE7で動かしてみたら、案の定動かなかった。

問題のひとつは、以前作った「1emが何pxか」にありました。
IE6がフォントの高さをなぜか2px分余計に算出する(多分勝手にマージンを入れてしまうのだろう)のですが、IE7ではこれが修正されていました。

せっかくなので、コードも修正するついでに、前回のエントリで作った$Wも使ってみました。

関連するエントリ:

1. 1emが何pxなのか自動的に計算する方法(3)
2. JavaScriptによる簡単な初期化ルーチン

修正されたコード:

var Util = $W({
emScale: null,
emScale_clientHeight: 0,
px2em: function (px) {
return px/this.emScale_clientHeight;
},
em2px: function (em) {
return em*this.emScale_clientHeight;
},
px2em_as_init: function (px) {
this._initializeEmScale();
},
em2px_as_init: function (em) {
this._initializeEmScale();
},
_initializeEmScale: function () {
if (!this.emScale) {
this.emScale = $('_util_emScale');
if (!this.emScale) {
var el = document.createElement('div');
el.id = '_util_emScale';
Element.setStyle(el, {
'position': 'absolute',
'margin': 0,
'padding': 0,
'width': '1px',
'height': '1em',
'visibility': 'hidden'
});
document.body.insertBefore(el, document.body.firstChild);
this.emScale = el;
if(!!(window.attachEvent && !window.opera && typeof document.documentElement.style.msInterpolationMode=='undefined')){
this.emScale_clientHeight = el.clientHeight - 2; // only IE6 2px over. Why??
} else {
this.emScale_clientHeight = el.clientHeight;
}
}
}
},
EndOfUtil: null
});

代表的な修正箇所は赤字にしておきました。

[フレーム]