资源管理器：使用 transform:scale 缩小后删除剩余的空白答案

【问题标题】：explorer: remove leftover whitespace after scaling down with transform:scale资源管理器：使用 transform:scale 缩小后删除剩余的空白
【发布时间】：2013-05-26 16:15:09
【问题描述】：

这很难解释...如果您使用 css 缩放（和缩放）来缩小（小于 1），在 explorer 9 和 10 中，周围的元素仍然将其内容区域视为具有其原始大小.例如

   transform:scale(0.5);
   width:200%;

将被视为 200% 宽，即使它显示为 100% 宽。让我用小提琴演示一下：

http://jsfiddle.net/pike/CAbcH/

我在 IE10 中同时看到水平和垂直滚动条。使用“缩放”代替具有相同的效果。

我如何解释浏览器不需要超出内容的滚动条？ jquery 解决方案也是可以接受的。

【问题讨论】：

在 safari 中，它应该是 100% 宽，但是当我滚动时，下面有一个 100% 的白色区域。
这是由于overflow: auto 删除它，它会修复它。您需要添加overflow: auto 的具体原因是什么
在现实生活中，如果内容超过100%/scale，我需要滚动条。是的，我需要overflow:auto；我需要滚动条，但我希望它们是正确的。
我已经更新了 fiddle 以使其在 firefox、chrome 和 safari 中的行为符合预期。现在唯一的错误是 Internet Explorer。

标签： css internet-explorer transform scale

【解决方案1】：

这是一种解决方案 - http://jsfiddle.net/pike/YmfGC/

不是那么整洁，使用浏览器嗅探，它基本上在缩放的 div 周围写了一个包装 <div>，仅适用于 IE，使用渲染页面后浏览器找到的 width() 和 height() ...

【讨论】：

接受我自己的回答。我想知道这会给我多少分:-)
当然，浏览器嗅探在 IE11 中不再起作用。该浏览器被称为“三叉戟”。

【解决方案2】：

我在#scroll 和overflow:hidden 上更改了overflow:hidden 和在#zoomed 上的overflow:auto: （即基本上扭转了它们的溢出），使滚动功能正常 - 这就是您要找的吗？虽然我有一个问题，为什么你需要有尺度，因为你可以让它看起来像你想要的 css。

【讨论】：

你的意思是，就像这个小提琴一样？ jsfiddle.net/pike/3c4KJ ?不，你不能这样做，因为（在大多数浏览器中）滚动条本身也会被缩放 - 例如，看看 chrome 中的那个小提琴，然后看到非常奇怪的细滚动条。在Firefox中，情况更糟。滚动容器需要包裹缩放容器...
why you would need the to have the scales - 这只是一个小提琴。在实际应用中，缩放是由jquery动态设置的。我希望容器大小保持不变，但内容可以放大和缩小。正如小提琴所示，缩小是一个问题。
我只能让它在 firefox 和 chrome 上正常工作，但不能在 IE 上正常工作:(在 IE 上它没有缩小 200% 的宽度和高度。也许，JQuery 是要走的路（？）