ちょっと古めのSafariでmargin-rightの値をgetComputedStyleで取得すると不正な値が。

現行のSafari 5や最新版Google Chromeでは直っているようですが、Safari 4.x で確認した事象。

表題のとおり、
古めのWebkit系ブラウザでは、JavaScriptの getComputedStyle で要素の margin-right の値を取得しようとしたときに間違った値が返ってくる。


例えば、

  width:450px;

  id ="inner"
 
  width:250px;
  margin-right:10px;



こんな場合に、内側のdivの右マージンの計算値を得ようと思って、

<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>

これで、正しく mr = '10px' という値を取得できます。

カテゴリ: