Layout with CSS3 - HTML5 and CSS3 - page 310

Most browsers will ignore the second two properties as invalid,
whereas IE7 and earlier will ignore the first property but process the
second two.
calc in Chrome and Firefox
Firefox requires the -moz- prefix for calc while Chrome requires
-webkit- . For maximum support, you should specify four rules—one
for browsers with no calc support, one for Firefox, and one for stan-
dards-compatible browsers (currently only IE ):
width: 23%;
width: -moz-calc(100%/4 - 10px);
width: -webkit-calc(100%/4 - 10px);
width: calc(100%/4 - 10px);
This code sets the element width to 23% in browsers that have no sup-
port for calc and 100%/4-10px for any browser that does support it.
box-sizing in Firefox and Safari 5
Firefox and older versions of Safari require a -moz- prefix for box-sizing :
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
If you need to support IE8 , because of the significant impact the box
model can have on your layout, it's best to use either IE conditional
comments or modernizr.js to provide alternative rules to that browser.
Flexboxes in Chrome, Firefox, IE, and Safari
Currently, prefixes are required in all browsers that support flexboxes.
To get maximum support, you need to specify each property four times:
div {
display: -moz-box;
display: -webkit-box;
display: -ms-box;
display: box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-ms-box-orient: vertical;