For a quick overview of browser compatability, Webmonkey has one of the best things going with the Browser compatability chart.

Generally, you have to look at what you're trying to accomplish and cut it off at the point of diminishing returns:

HTML 3 is pretty well covered by most browsers: this is up to tables, frames (usually), and basic JavaScript (1.0).

Netscape 4 and IE 4 use widely divergent DOMs for CSS and DHTML. There are some useful tricks such as:

This code is from HTML::Mason, but you can run the checks just as easily in JavaScript using Navigator.appName.indexOf('microsoft') to catch IE vs. NS.

%
%   if ($browser =~ /microsoft/) {
%
var doc = window.document.all;
var style = '.style';
var px = 'px';
%
%   } else {
%
var doc = window.document.layers;
var style = '';
var px = '';

var origWidth = innerWidth;
var origHeight = innerHeight;

function reDo() {
    if (innerWidth != origWidth || innerHeight != origHeight) {
        location.reload();
    }
}

onresize = reDo;
%
%   }
%
[download]

The onresize function is necessary in Netscape because resizing the browser breaks the CSS attributes unless you reload.

At its heart, the primary difference between Netscape and almost any other browser out there is that Netscape is completely unable to handle the dynamic alteration of certain attributes -- colour, characters, height, width... you can move things around in Netscape 4.0 but not a whole lot more.

If you keep this in mind you can develop strategies for delivering a dynamic experience for those able to view it. In an ideal world, you can use a tool such as HTML::Mason to deliver completely different Web sites based on little more than browser-type and version. Mason won me over when I was able to write a Lynx component (for disabled and old-skool users) in under an hour for my company's Web site.

Just remember : HTML is not a typesetting language. You will never get completely identical page rendering between browsers.

Opera does pretty well as well.

IE 5.0 on the Mac I know nothing about though. But 5.5 is supposed to be very good. (I have heard, "Not important enough to break.")

Beyond that, keep your html basic and it will work anywhere. Try to play a lot of games and make HTML be what it was not originally intended for, and it will break everything. Also while designing constantly test. Trying to design then fix afterwards is a nightmare. Moving forward in small steps that you verify as you go works much better.

-- Randal L. Schwartz, Perl hacker

Me, not wanting to get too involved in pixel adjustments, I have taken the stance of letting designers adjust pixels all they want in products like Frontpage, Dreamweaver, whatever.

When they hand me funky-browser-sensitive HTML it is their decision and not mine. HOWEVER, I still need to take their stuff and make it work in final system...which is primarily template driven.

So the first time around I'll templatize their design. Then a series of subtle changes will follow - pixel moved here or there. You know, the usual stuff. Tag Compare might help you spot these little changes.

So, although this may not be of much use on identifying, and avoiding browser idiosyncracies it may assist in accomodating some of the designer's needs quickly and accurately.

It's too bad they don't know enough about standard HTML to write it. I don't trust any authority on HTML that can't write valid HTML. Here's the errors iCab just reported:

Warning (1/1): <!DOCTYPE> is missing.
Warning (14/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (15/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (16/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (17/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (18/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (19/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (20/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (21/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (22/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (23/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (24/3): The attribute "SRC" is not allowed for the tag <LINK>.
Warning (25/3): The attribute "SRC" is not allowed for the tag <LINK>.
Error (37/1): The color name "ff0000" is not valid. 
Warning (41/1): The tag <CENTER> should no longer be used since HTML 4
+.0.
Error (69/3): In tag <IMG> the value "centre" is not valid for attribu
+te "ALIGN". 
Error (70/3): In tag <IMG> the value "centre" is not valid for attribu
+te "ALIGN". 
Warning (72/23): The tag <FONT> should no longer be used since HTML 4.
+0.
Error (72/94): The start tag for </A> can't be found.
Warning (76/2): The tag <CENTER> should no longer be used since HTML 4
+.0.
[download]

-- Randal L. Schwartz, Perl hacker