Chrome user agent stylesheet box-sizing: border-box vs content-box

While developing a new function on part of the company’s control panel I noticed the heights and widths of the input boxes to be marginally different from the exact same inputs on another page. Using Chrome’s web inspector I discovered that all the set padding, heights, margins and borders were the same, but the computed output to be different.

Notice how the overall height of the left one (height + padding + border) matches the height of the right.
Notice how the overall height of the left one (height + padding + border) matches the height of the right.

The difference is minor, but I noticed that the overall height (height + padding + border) matched just the height of the ‘correct’ one. This reminded me of the differences between box-sizing in browsers: border-box vs content-box (see QuirksMode explanation).

The thing is, I hadn’t set the box-sizing, and it wasn’t being set in any of our style sheets; it was coming from the user agent stylesheet. After a little Googling I came across this post on Stackoverflow. This suggested that the issue arose from outputting content before the DOCTYPE, and that was the issue, the DOCTYPE was missing from the output as I was outputting some debugging text before it. As soon as I removed that all the styling was back to normal.

Advertisements

Published by:

Skyrail

Production Facilitator at Audacious Church Previously Software Developer at UKFast Ltd. and Web Applications Developer at SenseLogix Ltd. Graduate of Renewable Energy BSc from the University of Exeter. Experience with PHP, MySQL, Javascript, CSS and HTML.

Categories Web DevelopmentTags , , Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s