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.

In reply to Re: HTML rendering differences among browsers by jreades
in thread HTML rendering differences among browsers by rodry

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.