按标准的表现,getBoundingClientRect的时候应该是要将 transform（包括3d transforms） 算入在内的。
并且特意测试了下 旋转（rotate） 在moz，webkit下的表现也证明如此。 旋转后元素的BoundingClientRect.left值即元素最左侧点的x坐标， right值即最右侧点的x坐标， width值（记得ie没有这个值，不知道ie9有没有增加）即left与right值之差。 top,bottom,height同理。 如果在旋转元素上绑定鼠标事件，只会在旋转后的范围内触发，浏览器也已经做过计算。 在 2012年7月4日 上午9:21，John Hax <[email protected]>写道： > 突然想到旋转后，clientRect是啥情况？ > > 还有突然想到，在transform后的元素里，鼠标事件的坐标应该是怎样的？是否要换算回去呢？ > > 而且上述这两件事情也还有一点点相关。 > > > 有空测试一下。 > > > 2012/7/2 Jinks Zhao <[email protected]> > >> 我的疑问源自这里： >> http://www.w3.org/TR/cssom-**view/#the-getclientrects-and-** >> getboundingclientrect-methods<http://www.w3.org/TR/cssom-view/#the-getclientrects-and-getboundingclientrect-methods> >> >> 最近用到了getClientRects()这个方法，**但发现不同浏览器下的结果不同，**主要是webkit会将transform后的结果返回，* >> *而gecko则会忽略transform，**将变换前的坐标和尺寸返回。（后来试了一下IE 9+，表现和webkit相同） >> >> 自己写了个简单的DEMO: >> http://jsbin.com/anumis/ >> >> DEMO中，**gecko的处理结果在transform前后的结果相同，**webkit则不同。 >> >> 我个人对标准中原文(position of the border box edges of an element relative >> to the viewport)的理解是：**应该把transform结果也计算在内，**这样才真实的呈现了viewport的效果。** >> 不知大家怎么看这个问题。 >> >> >> Jinks Zhao | 勾三股四 >> [email protected] >> http://weibo.com/mx006 >> >> > -- ONEBOYS @www.cssass.com 休言万事转头空，未转头时是梦
