Constant pixel size in CSS

I am trying to add some extra padding to the right side of a scrollbar, but when I zoom in the browser window (with ctrl+= and ctrl+-) the actual pixel width of the padding grows and shrinks accordingly (as if I had specified it in ems). I would like the right property for the container to be exactly 8 pixels, not 0.5ems (8/16=0.5).

Is there a way to set the top, bottom, left, and right css properties to a fixed value that doesn't change depending on the font size (I don't mind using JavaScript if I have to)?

Here's my 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;
}
开发者_如何学Python

To keep the "padding width" fixed even when you zoom, you need to find out the zoom level using JavaScript.

It's sort of possible, but it's totally not worth it because it's unreliable, see: How to detect page zoom level in all modern browsers?

Maybe there's a better way to achieve the same thing - you should post a jsFiddle demo of what you have so far.

Most browsers appear to virtually change the resolution of the page; this change is out of the control of javascript and css. The short answer is you can't and if you find one browser that does work you have to decide between standards and consistency and how it looks on one browser. Html, css and javascript arnt made for this type of control