CSS变换比例和Javascript offsetHeight答案

【问题标题】：CSS transform scale and Javascript offsetHeightCSS变换比例和Javascript offsetHeight
【发布时间】：2013-09-20 00:39:09
【问题描述】：

我得到了 offsetHeight 与比例变换相结合的奇怪结果。我的简单 HTML 如下

  <body>
    <div id="id01">
      Some Text
    </div>
    <div id="id02" style="transform-origin: left top; transform: scale(2)">
      Some Text
    </div>
  </body>

  <script>
    var elem01 = document.getElementById('id01');
    var elem02 = document.getElementById('id02');
    alert(elem01.offsetHeight == elem02.offsetHeight);   // Always show true???
  </script>

在屏幕上，第二个<div> 比第一个<div> 大（两倍）。因此，我预计第二个<div> 的 offsetHeight 应该大于第一个。

我的问题是：为什么在这种情况下elem01.offsetHeight 总是等于elem02.offsetHeight？浏览器不使用transform计算元素的offsetHeight？

谢谢

【问题讨论】：

标签： javascript css css-transforms

【解决方案1】：

变换影响像素比，而不是 DOM 中的实际像素数量。

This previous question has some insights and possible solutions.

【讨论】：