
The problem: HTML elements have inconsistent sizes across different browsers.
The solution: Set box-sizing for all elements to border-box.
A long-time bane for web developers, Internet Explorer did one thing right: It sized boxes properly.
Other browsers only look at the content when calculating the width of an HTML element, with everything else treated as surplus. A width: 200px div, with 20px padding and a 2px border, renders as 242 pixels wide.