27
Jun
Posted by Ray Cheung as Information
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
It’s kinda depressing, to make a standards compliant website, don’t use any of the cool new stuff.
The sooner IE6 is dead the better!
[…] WebAppers, here is a nice article on cross browser compatibility from Anthony Short. Cross-browser […]
[…] But you should go ahead and read the whole article (via WebAppers.com). […]
[…] How to Get Cross Browser Compatibility Every Time | Web Resources | WebAppers (tags: browser web development css) […]
[…] WebAppers Escrito el 30.06.08 @ 3:27 pm | Categoria: Diseño Web | | Written by: Alan Vargas […]
Cool!
And is true!! The sooner IE6 is dead the better!
We test http://www.iphonegurues.com with your post recomendations and really works!
Great concise list - a must have bit of info for the beginner and everyone forgets the reset!
RSS feed for comments on this post · TrackBack URI