html - CSS 中的恒定像素大小

Question

我试图在滚动条的右侧添加一些额外的填充，但是当我放大浏览器窗口时(使用 ctrl+= 和 ctrl+-)，填充的实际像素宽度相应地增长和缩小(就像我已在 ems 中指定了它)。我希望容器的 right 属性正好是 8 个像素，而不是 0.5ems (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演示您目前拥有的内容。