moz-transform scale减少div大小问题

Posted 2023-03-06

【中文标题】moz-transform scale减少div大小问题

【英文标题】：moz-transform scale decrease div size problem

【发布时间】：2011-09-14 22:03:25

【问题描述】：

我在使用 mozilla moz-transform scale 属性时遇到问题。 我正在寻找 zoom 属性的替代品，它在除 Firefox 之外的所有内容中都可以正常工作。

当我想缩小 div 时，它的“内容”确实缩小了，但容器的大小保持不变，在其他内容周围留下了很大的空隙。

有什么方法可以强制容器尺寸减小吗？

为了澄清，我举了一个简单的例子here。 用chrome和firefox打开，你会看到区别。

【问题讨论】：

容器在 FF 中确实缩小了（至少在 3.6 中），只是内部 div 也缩小了一半。该css容器在FF中为150X150，内部div为50x50。如果将内部 div 设置为 -moz-transform: scale(2);比容器是 150x150 和内部 div 保持 100x100。

嗯，我去看看。在 4.0.1 中它不好。问题出在“Something after”文本中，它应该在 div 下方（没有空格），而不是内部 div

啊，我明白了。不知道该怎么做。您可以使用 -moz-transform-origin:left bottom;对于测试 div，但你会在顶部得到空白空间）））

【参考方案1】：

到目前为止，我唯一的解决方案是将其全部包装在另一个 div 容器中，高度固定。

并不是我真正想要的，但在有人找到更好的解决方案之前，我认为这是唯一的出路。

【讨论】：

感谢 -moz-transform-origin:left top;你的例子中的属性。这对我帮助很大:)

您能否更仔细地解释一下您的意思？我们有同样的问题！ @ZolaKt

那是很久以前的事了，我没有确切的例子。但是，如果我没记错的话，您将有问题的 div 包装在另一个 div 中。在该父元素上设置固定高度。里面的 div 仍然用额外的空间破坏布局，但是你把溢出：隐藏在父级上，所以破坏是不可见的。这是一个 hack，不是很漂亮，但它可以工作

【参考方案2】：

不要将zoom 和-moz-transform 混合使用，为什么不将-webkit-transform 用于Chrome？然后你可以在所有浏览器上平均调整高度。

【讨论】：

因为缩放也可以处理 ie，而不仅仅是 chrome。是的，固定高度似乎是唯一的出路。另一个包装它的容器，具有固定的高度。有问题的 div 仍然太大，但不会破坏布局