Question

我们正在使用CSS声明transform:scale(n)来模拟通过浏览器设置进行缩放（例如ctrl - +，ctrl - -或ctrl - mousewheel）。这在Webkit浏览器中按预期工作，但Firefox将页面向下扩展到可见高度以外并显示滚动条。

简化为最小的情况，页面结构如下所示：

<body>
    <div id="middle-col">
        This is the middle column.
    </div>
</body>

CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
body {
    background: #999;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
#middle-col {
    width: 400px;
    height: 100%;
    margin: 0 auto;
    background: #fff;
}

缩小至80％时，将应用以下设置：

body.scale80 {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    width: 125%;   /* 100/.8 */
    height: 125%;  /* 100/.8 */
}

如何避免出现在Firefox中的垂直滚动条？

使用Ctrl - +/-时，相同页面在Firefox（=没有滚动条）中正常显示。

静态示例：http://jsfiddle.net/qf1vjauj/1/
动态示例：http://jsfiddle.net/8uqk1med/3/

注意：这是一个特殊的案例设计。我很欣赏，一般来说，页面缩放应该留给用户选择。

Answer 1

不知道你是否设法解决了你的问题，但我遇到了同样的问题。通过将父div设置为overflow：hidden。来解决它。

CSS转换：scale（）在Firefox中引入了滚动条，如何摆脱它？

1 个答案: