Reduce error in chrome, IE, etc., with borders?

Question

A simple test case:

http://cssdesk.com/K2xmN

Another example:

http://developer.nokia.com/

Problem: When changing the zoom page to 90%, the border goes to 1.111 (1.333 to 75%) and breaks the layouts.

On the nokia website, you can see how the top containers break because there is no free space. In the CSSDesk test, if you check the computed styles, you will see that the width of the border will be higher.

Why is this happening? the border is not set to EM or % , why does it scale?

Answer 1

This is an artifact of the 1px border scaling problem. To illustrate what happened, I modified your test case to include zoom: 0.5; in css: http://cssdesk.com/zn4Lx

Note that if you check the computed style, the border width will be 2px. What happens is that Chrome tries to zoom out, but after scaling the border should still be 1px wide if it remains visible (after all, 1px is the smallest unit that can be displayed on a computer screen, and if the border width is reduced to a floating point number less than 1.0, it will be rounded to 0px and disappear). But to justify scaling, it overcompensates by adjusting the initial width to satisfy the equation

 new_width = old_width * scale 

In this example, since new_width = 1px and scale = 0.5 , it recalculates old_width as 2px . Note, however, that the actual border width that appears after scaling is still 1px .

So, in your example, the adjusted old width will be approximately 1.11111111px , and the width of the selected border will be 1px wide, but since all other layout widths that are larger than 1px were also reduced by about 90%, there is no room for a width of 1 pixel, which leads to a broken layout.

Answer 2

Why it was explained, but I would share a workaround that I just discovered: Often you can replace the frame with a shadow box that looks exactly like a border, but does not add to the outer width of the element:

Instead

 border: 1px solid red; 

records

 box-shadow: inset 0 0 0 1px red; width: 102px; height: 102px; 

The width and height of the div must be adjusted accordingly to match the fact that 1px borders on each side have disappeared. Now, when scaling, the browser will still process the window shadow in the same way as the border, i.e. It will not decrease below 1px, but it will not affect the width of the element and, therefore, the layout will not break.

Alternatively, you can probably use the window size: border-box; to some similar effect.