現行のSafari 5や最新版Google Chromeでは直っているようですが、Safari 4.x で確認した事象。
表題のとおり、
古めのWebkit系ブラウザでは、JavaScriptの getComputedStyle で要素の margin-right の値を取得しようとしたときに間違った値が返ってくる。
例えば、
width:450px;
id ="inner"
width:250px;
margin-right:10px;
width:250px;
margin-right:10px;
こんな場合に、内側のdivの右マージンの計算値を得ようと思って、
<script>
var inner = document.getElementById( 'inner' );
var mr = document.defaultView.getComputedStyle( inner , null ).marginRight;
</script>
var inner = document.getElementById( 'inner' );
var mr = document.defaultView.getComputedStyle( inner , null ).marginRight;
</script>
なんてしてやると、mr には( 450px - 250px )、つまり 200px という値が入ります。が、これ不正。スタイルで指定した 10px が入るべきで、古めのWebkit系ブラウザ以外のブラウザでは正しく 10px が返ってきます。
このバグを回避するには、こう。
<script>
var inner = document.getElementById( 'inner' );
var displayStyleBackUp = inner.style.display;
inner.style.display = 'inline-block';
var mr = document.defaultView.getComputedStyle( inner , null ).marginRight;
inner.style.display = displayStyleBackUp;
</script>
var inner = document.getElementById( 'inner' );
var displayStyleBackUp = inner.style.display;
inner.style.display = 'inline-block';
var mr = document.defaultView.getComputedStyle( inner , null ).marginRight;
inner.style.display = displayStyleBackUp;
</script>
これで、正しく mr = '10px' という値を取得できます。
コメント