CSS Cross Browser compatibility tips

on

I have been reading the very interesting topic and just decided to keep a note on that. Just for myself. Blog is sometimes useful  as a notebook for myself. And it might help other people.

So what I want to note here: I often fight with different issues across Firefox and Internet Explorer (only these 2 browsers, but it's already enough for me).

I prefer to style pages in Firefox (just because it's more convenient using Firebug). Then I hope everything will work in IE (6,7) as well. But it has have did.
So I have to tweak CSS for IE and watch not to break what's done for FF. It's just a real PITA.

There are tons of guides how to write cross browser CSS.

But the one I particularly like has some short and useful tips. Let's quickly move through them:

  • Reset styles to make consistent look in all browsers. Sample. Note: Most JS libraries (YUI, ExtJS etc) provide reset CSS rules.
  • Do not resize images via CSS/HTML because not all browsers do it well.
  • Do not use light font on dark background because of issues in Safari that causes other issues fixing this one.
  • Use only common fonts (Arial, Georgia, Verdana etc) because of different browsers and OS's render it differently.
  • Size font in em through the page, but initialise in % for body. I'm not exactly sure about this, but the reason is that "The ability to resize text differs amongst browsers and OS’s".
  • All layout divs that are floated should include display:inline and overflow:hidden. This is due to IE doubles margins on the float side and IE 6 layout problems.
  • Carefully clear floats using overflow:auto or overflow:hidden. Be aware of issues. See Samle.
  • Use CSS selectors subset that all of your browser support. See browser CSS selectors support.
  • Do not use PNG transparency if you need to support IE 6.

The general idea I prefer to stick is just using minimum subset of a features available in all supported browsers intersected with W3C standard.

So if one browser doesn't support particular descendant selector - never use it. If there's no such W3C description - never use it (not always possible).

But still the biggest problem is when browsers behave different ways with the same supported feature.
I hope couple of these tips and links will help to solve you (and me) some of the cross-browser compatibility issues.