10

问题：当使用“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 能够滚动以查看它包含的图像的全部内容。

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

4

1 回答 1

3

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

于 2011-07-12T12:48:13.137 回答