gpt4 book ai didi

CSS transform :scale() introduces a scrollbar in Firefox, 如何摆脱它?

转载 作者:行者123 更新时间:2023-11-28 10:02:08 28 4
gpt4 key购买 nike

我们使用 CSS 声明 transform:scale(n) 通过浏览器设置(例如 ctrl-+ctrl--ctrl-鼠标滚轮)。这在 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 中正确显示(= 没有滚动条)。

注意:这是一个特例设计。我明白,一般来说,页面缩放应该留给用户选择。

最佳答案

不知道你的问题有没有解决,我也遇到了同样的问题。通过将父 div 设置为 overflow:hidden 解决了这个问题。

关于CSS transform :scale() introduces a scrollbar in Firefox, 如何摆脱它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25712361/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com