Search code examples
cssfirefoxpaddingborder-box

CSS padding issue using box-sizing:border-box in Firefox

I'm having a weird issue in Firefox, it looks likes the debug console is lying to me or I'm missing something.

Here is the CSS for the body tag : 

html, body {
    width: 100%; 
}

body {
    padding: 5% 10% 0 10%; 
    font-size: 1.2em;
    font-family: 'Raleway', Arial, sans-serif; 
    font-weight: 300; 
    color: #2b2b2b; 
    margin: auto; 
    max-width: 1200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

I'm using the property "box-sizing" so the max-width is supposed to be 1200px with the padding inside. As the debug console is saying (at the bottom right), the width of the content area is supposed to be 898px but if I measure it, here is what I really get :

CSS padding issue using box-sizing:border-box in Firefox

Am I mistaken about the box-sizing:border-box property ?

Thank you guys !

EDIT : I made a jsfiddle here with a simplified case.

Look at the image below, you'll find the html, the box model given by the inspector, the render and a red square I added on Photoshop (which is really 150x150px). I don't understand, the inspector is saying that the box is 150x150 but it's wrong...

box-sizing and inspector issue on Firefox

Solution

  • Actually Windows 8 is zooming at 125% by default and Firefox is using this ratio as his default zoom level.

    Then you have two choices :

    1. Change the zoom level of Windows to 100% : control pannel > appearance > display
    2. Set the Firefox's zoom ratio to 1.0 : type about:config in the adress bar of the browser, search for layout.css.devPixelsPerPx and set it to 1.0

    More informations about this here : https://support.mozilla.org/fr/questions/963759

    Good to know that most of Windows 8's users are going to see your site zooming at 125% in Firefox.