How to get Cross Browser Compatibility Every Time

Through WebAppers, here is a nice article on cross browser compatibility from Anthony Short.
"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. I’ve collated all the information I 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."

Anthony is nice enough to provide a summary for those who don't want to read the whole article... which I recommend you do:

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


Interested ? So keep on reading !

Average: 3.5 (2 votes)