overflow:auto不能与CSS3转换的子元素一起使用.建议的解决方法？

Question

问题:当使用"overflow:auto;"计算包含div的滚动条的scrollHeight和scrollWidth时,浏览器(FF5,Chrome12,IE9)会忽略应用于div内的子元素的css3转换.

<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>    
<div><img src="somelargeimage.png" /></div>

我已经在jsfiddle上进行了一个小测试,显示了不良行为.

http://jsfiddle.net/4b9BJ/

本质上我试图创建一个简单的基于Web的图像查看器使用css3转换旋转和缩放,并希望包含固定宽度/高度的div能够滚动查看它包含的图像的完整内容.

有没有一种智能的方法来处理这个问题,甚至是一个粗略的解决方法？任何帮助表示赞赏.

Answer 1

我为每个转换添加了一个额外的 div，并通过为这些 div 设置固定宽度并剪切溢出，我设法使它们具有正确的大小。但后来我不得不使用position:relative和top:blah; 左：将图像移动到正确的位置。 http://jsfiddle.net/4b9BJ/7/