Question

我正在使用zoom: 0.5;并且它在我的网站上正常运行，但是当我添加moz-transform: scale(0.5);和moz-transform-origin: 0 0;时为了使网站与Firefox兼容，固定定位元素我已经不固定了而不是放在正确的位置（它们应该在的位置的顶部和左侧）。该网站在Chrome中按预期工作，这只发生在Firefox中。

这是代码

.mobPopUp{
    position: fixed;
    width: 500px;
    height: 200px;
    border: 5px solid black;
    text-align: center;
    font-size: 24px;
    font-weight: 900px;
    color: lime;
    bottom: 0px;
    text-shadow: 3px 3px black;
}
#mobPopUpBlue{
    right: 0px;
    background-color: blue;
}
html{
    zoom:0.5;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0
}

<div id="mobPopUpred" class="mobPopUp">Right click on a mob to see their stats here</div>

我做错了什么？我怎样才能拥有它，因此它可以在Firefox上运行，就像在Chrome上使用zoom

一样

Answer 1

没有真正的CSS zoom属性，它只是Internet Explorer发明的非标准属性，并且出于兼容性原因被其他一些浏览器采用。用于缩放转换的正确属性是transform属性。

Firefox早已删除了-moz-供应商前缀，并且从未实现zoom，因此这可能是您的代码在Firefox中无效的原因，但是对于maxium浏览器支持，您可以使用以下内容。 / p>

-webkit-transform: scale(0.5);
   -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
     -o-transform: scale(0.5);
        transform: scale(0.5);

这将适用于IE9或更好的任何东西。如果您需要IE8支持，那么您可以尝试在IE＆lt; = 8 CSS hack中添加zoom。

Firefox缩放机制不按预期工作？

1 个答案: