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能够滚动以查看其包含的图像的完整内容。 / p>

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

Answer 1

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

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

1 个答案: