How to Get Cross Browser Compatibility Every Time

Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. Anthonyshort has collated all the information he could find to create some coding conventions for ensuring that your site will work first time in every browser. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes. Here is a quick summary of How to get Cross Browser Compatibility Every Time:

• Always use strict doctype and standards-compliant HTML/CSS
• Always use a reset at the start of your css
• Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
• Never resize images in the CSS or HTML
• Check font rendering in every browser. Don’t use Lucida
• Size text as a % in the body, and as em’s throughout
• All layout divs that are floated should include display:inline and overflow:hidden
• Containers should have overflow:auto and trigger hasLayout via a width or height
• Don’t use any fancy CSS3 selectors
• Don’t use transparent PNG’s unless you have loaded the alpha

Source: How to get Cross Browser Compatibility Every Time