Overflow:auto 不适用于 CSS3 转换的子元素。建议的解决方法？
问题：在使用“overflow: auto;”计算包含 div 的滚动条的滚动高度和滚动宽度时，浏览器（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 进行了一个小测试，显示了不良行为。
本质上，我试图使用 css3 变换来创建一个简单的基于 Web 的图像查看器进行旋转和缩放并希望具有固定宽度/高度的包含 div 能够滚动以查看其包含的图像的完整内容。
是否有一种明智的方法来处理这个问题，甚至是一个粗略的解决方法？任何帮助表示赞赏。
Problem: css3 transforms applied to a child element inside a div are ignored by the browser (FF5, Chrome12, IE9) when calculating the scrollHeight and scrollWidth of the containing div's scrollbars when using "overflow: auto;".
<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>
I have put together a small test on jsfiddle showing the undesired behavior.
Essentially I am trying to create a simple web based image viewer using css3 transforms for rotate and scale and would like a containing div with fixed width/height to be able to scroll to see the full content of the image it contains.
Is there an intelligent way to handle this issue, or even a rough workaround? Any help is appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我为每个转换添加了一个额外的 div，并通过为这些 div 设置固定宽度并剪切溢出，我设法使它们具有正确的大小。但后来我不得不使用position:relative和top:blah;左：将图像移动到正确的位置。
http://jsfiddle.net/4b9BJ/7/
I added an extra div to each of the transformations and by setting fixed widths for those divs and clipping overflow I manged to make them the correct size. But then I had to use position: relative and top: blah; left: blah to shift the images into the correct position.
http://jsfiddle.net/4b9BJ/7/