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 normalize.css 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.
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, add this to everything that you do from now on:
* { -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.