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.

[caption id="attachment_436" align="aligncenter" width="717"] Notice how the overall height of the left one (height + padding + border) matches the height of the right.[/caption]

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.