Make Your CSS 3 Work Across Web Browsers

If you're designing your website for the desktop as well as for the iPhone and iPad, you can still use the experimental CSS 3! Eventually, the CSS 3 in your site will likely be supported. The example in this section shows you how to hedge your bets for the future.

For any of the -webkit- code examples (that cover beloved Safari versions 3 and 4), create another identical CSS rule with -moz- to cover Firefox and one CSS rule with just the root name to cover the newest browsers: Opera 10.5, Internet Explorer 9, Safari 5, Chrome, and future browsers.

Here’s an example of a set of rules to round the corners of a box:

-webkit-border-radius: 12px; /* Saf3-4 */
-moz-border-radius: 12px; /* FF1+ */
border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */

The new semantic tags in HTML5 work well in Safari on the iPhone and iPad, but not in most of the older web browsers still common on the web. To make these new elements work in older browsers, all you have to do is set the style rules for display to block to define the semantic tags as block-level elements. This action makes them act like <div> tags in older browsers.

Because not all browsers interpret HTML and CSS in the same way, many web developers begin designing pages by creating styles that remove any border, padding, or margins included in an HTML tag by defining a style that sets those values to 0 (as you see in the following example).

The process of resetting elements helps ensure that any styles you create will display more consistently across different web browsers because all your tags start with the same blank slate. It's good practice for Safari on the iPad and iPhone, and for other browsers.

In this example, the display was set to block and simultaneously set the border, padding, and margin to 0, to ensure a more consistent display across different web browsers:

article, aside, footer, header, menu, nav, section, details, table, body, h1, h2, h3, p, ul, li, {
                            border:0; margin:0; padding:0;
                            display: block;
 
}

dummies

Source:http://www.dummies.com/how-to/content/make-your-css-3-work-across-web-browsers.html