在 Firefox 中使用 CSS Scale 时，元素保持原始位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7980648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When using CSS Scale in Firefox, element keeps original position
提问by Thomas
When using scale in Firefox, the scaled element dóes get scaled properly. The problem is, that it's positioned as if it isn't scaled.
在 Firefox 中使用缩放时，缩放元素确实会正确缩放。问题是，它的定位好像没有缩放。
This works fine in Chrome, and probably also in IE, Safari and Opera. These browsers all support the CSS zoom property, where Firefox doesn't. For Firefox I'm using -moz-transform: scale(0.3);.
这在 Chrome 中运行良好，可能也适用于 IE、Safari 和 Opera。这些浏览器都支持 CSS zoom 属性，而 Firefox 不支持。对于 Firefox，我使用的是 -moz-transform: scale(0.3);。
This is my CSS:
这是我的 CSS：
#overview .page-content {
zoom: 0.3;
-moz-transform: scale(0.3);
}
This is what it should look like (as in Chrome):
它应该是这样的（如在 Chrome 中）：
This is what it shouldn't look like (as in Firefox):
这是它不应该的样子（如在 Firefox 中）：
Does anybody know how to fix this? Or maybe a workaround?
有谁知道如何解决这个问题？或者也许是一种解决方法？
回答by borisrorsvort
回答by scabbiaza
I added -transform-origin: 0 0; and it still did not work.
我添加了 -transform-origin: 0 0; 它仍然不起作用。
Somehow in Chrome it collapsed to -webkit-transform-origin: 0;
不知何故，它在 Chrome 中折叠为 -webkit-transform-origin: 0;
So I changed it to -transform-origin: top left; and it works fine now.
所以我把它改成 -transform-origin: top left; 现在它工作正常。
Full code:
完整代码：
-moz-transform: scale(50%);
-moz-transform-origin: top left;
-o-transform: scale(50%);
-o-transform-origin: top left;
-webkit-transform: scale(50%);
-webkit-transform-origin: top left;
回答by stackasec
If absolute positioning is not an option - and aware of according browser support - display: table-cellwith a min-widthdefinition, should needs be, might do the trick as well.
如果绝对定位不是一个选项 - 并且知道相应的浏览器支持 -display: table-cell带有min-width定义，应该需要，也可以解决问题。
E.g. this helped me to get a row with customer logos scaling well across different screen resolutions.
例如，这帮助我获得了在不同屏幕分辨率下都能很好缩放的客户徽标。
