Browser compatibility issues can be frustrating, here’s how to avoid them: 1. Prefix CSS3 styles If you’re using any type of modern CSS snippets, like box-sizing, or background-clip, just make sure that you use the appropriate vendor prefixes. -moz- /* Firefox and other browsers using Mozilla's browser engine */-webkit- /* Safari, Chrome and browsers using the Webkit engine */-o- /* Opera */-ms- /* Internet Explorer (but not always) */ 2. Use a reset You can use or just a simple reset found anywhere on the net. Here’s the one I use and it’s from the Genesis Framework Style Sheet. normalize.css html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address,big,cite,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,input,menu,nav,output,ruby,section,summary,time,mark,audio,video {border: 0;margin: 0;padding: 0;vertical-align: baseline;} 3. Avoid padding with widths When you add padding to an element with a width, it will end up much larger than what it should be. The width and the padding will be added together. So, if I have an element with the width of 100px, and I add a padding of 10px to that same element, then the awkward browser behavior will make that element 120px. To fix that, from now on: add this to everything that you do * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box; /* Firefox, other Gecko */box-sizing: border-box; } 4. Clear your floats, always! Make sure you clear your floats! If you don’t clear your floats, things will start acting weird. To learn more about how floats act on browsers, check out . this article from Chris Coyier To clear your floats, use this snippet of CSS: .parent-selector:after {content: "";display: table;clear: both;} If you wrap most of your elements, a really simple way would be to add this to your wrap class. .wrap:after {content: "";display: table;clear: both;} Tada! Now your floats should be cleared. 5. Test it out! Create your own cross-browser infrastructure or just use . Endtest If you make these things a habit, you will drastically eliminate 95% of your cross browser issues.
