Question

我正在尝试在滚动条的右侧添加一些额外的填充，但是当我放大浏览器窗口（使用ctrl + =和ctrl + - ）时，填充的实际像素宽度会相应地增大和缩小（就像我在ems中指定了它。我希望容器的right属性正好是8像素，而不是0.5周（8/16 = 0.5）。

有没有办法将top，bottom，left和right css属性设置为固定值，该值不会因字体大小而改变（如果必须，我不介意使用JavaScript）？

这是我的CSS：

#page-bg
{
    background-color: #FFFFFF;
    padding: 0px;
    border-width: 2px;
    border-radius: 2em; 
    position: absolute;
    top: 1em;
    left: 10%;
    right: 10%;
    bottom: 0px;
    overflow: hidden;
    z-index: 0;
}

#page-content
{
    overflow: scroll;
    position: absolute;
    top: 8px; /* these are what I'm talking about */
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 1;
}

Answer 1

即使缩放也要保持“填充宽度”固定，您需要使用JavaScript找出缩放级别。

这有点可能，但它完全不值得，因为它不可靠，请参阅：How to detect page zoom level in all modern browsers?

也许有更好的方法来实现同样的目标 - 你应该发布一个jsFiddle演示到目前为止你所拥有的东西。

Answer 2

大多数浏览器似乎实际上都会改变页面的分辨率;此更改不受javascript和css的控制。简短的回答是你不能，如果你找到一个可以工作的浏览器，你必须在标准和一致性以及它在一个浏览器上的外观之间做出决定。用于此类控件的Html，css和javascript arnt

CSS中的恒定像素大小

2 个答案: