Cross Browser Compatibility Tips

I thought I knew a great deal about CSS and website design until I began doing cross browser debugging. Website developers know all too well that cross browser problems can turn into a front-end nightmare. If you fix one problem, you may often break something else in another browser. Designing a website to behave in outdated browsers (particularly Ie6) requires a lot of problem solving. Even after a great deal of practice, it is very difficult to design a website to display perfectly in all browsers. Here are some tools I find myself using most to test, and fix, some common problems:

1. A CSS fix to eliminate the thick text appearance in Safari.

* {
margin:0;
outline-color: -moz-use-text-color;
outline-style: none;
outline-width:0;
padding:0;
text-shadow:0 0 0 #000000;
}

2. Need to test your page in Ie7, but accidentally upgraded your browser to Ie8? Drop this code in the head tag of your html file to make Ie8 emulate Ie7:

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

3. Display: inline-block is nicely obeyed in most (modern) browsers, but not Ie6.

This is particularly troublesome for fluid layouts or div elements which need to stretch around dynamic content. In these cases try using Display: table or Display: table-cell a try when browser solving for Ie6- depending on how you have your div’s styled it just might save the day.

4. If ie6 is your only troublesome browser (and there aren’t enough visual faults to warrant a separate CSS file for ie6) try using the !important identifier followed by a copy of the same statement without it. Ie6 will ignore the !important identifier and use the latter one instead:

.myclass {
margin: 20px 10px!important; /* browsers other than ie6 obey !important and ignore the second statement */
margin: 10px 5px!important; /* Ie6 will ignore the !important identifier and override it with this value */

}