Browsers

Navigators do not interpret HTML, javascript or CSS and don't display images, animations and transparency the same way.

When you can enable java (JRE 6.0), install the "plugins" (Flash, Ipix, Quicktime, Acrobat Reader...), positions on the screen may change.

As they find a lot of compatibility problems, webmasters may redirect the pages according to the detected navigator or create several style sheets or write for the most famous navigators or the most frequent or their favourite. Here is the danger when you use these add-ons pretending anonymous browsing as they may block your referrer -"HTTP_REFERER"- or refuse cookies (several routines as the style switcher won't work) or they may mask your browser identity (if you use them, the menu on the left may overlap the text, may be without the CSS popup and some text may not appear in many pages).

Consequences on mirrors

As the source code may depend on the User Agent, the best is to identify the browser at the time of a capture.
It may also be a way to complete a mirror as identified robots are sometimes stopped by some sites or providers (free.fr for example).

HTTrack gives you the choice between 30 identifiers according to the browser and the operating system and an option to send any User Agent string.

Before offline browsers filtering by free.fr, you could mirror this site with different browser identities (a recent and an old browser for example) and get very different pages. With Mozilla (+ Multizilla), Firefox (+ User Agent Switcher), Konqueror, K-Meleon or by connecting to wannabrowser, you will get very different sources: with or without javascript, with alternate stylesheets or not...
In the site, the page http://danzcontrib2.free.fr/no_msie6.php redirects any MSIE 6 compatible to the home page and displays the code to other browsers. The same can be done for robots or for a masked identifier.

When you update your navigator, update the capture if it is still possible.

A few compatibility problems

Problems with this site:

• This site has been tested with several screen resolutions (800x600 seems to be a minimum) and the four CSS engines (Trident, Gecko, WebKit et Presto).
  MSIE 3, 4, 5, 5.5, 7 and 8 (standalone versions can be downloaded from the website TredoSoft or Internet Explorer Collection), Mozilla from version 1.4 (Windows and Linux), Firefox / Firebird /Phoenix (Windows and Linux), Safari 2 and 3 and Chrome 1 and 2, Netscape 4, 6, 7 and 8, K-Meleon, Konqueror (Linux), Galeon (Linux), Epiphany (Linux), Links (Linux), elinks 0.9 (Linux), Opera 5, 6, 7, 8 and 9 (Windows and Linux), Dillo (Linux), Beonex Communicator, Off By One, BrowseX, XBrowser (java) and some others.

All the tests led to modifications (and new bugs!).

• I gave up with Amaya.
• Netscape does not display tables, divisions, GIF animations as MSIE.
• Netscape 4 does not like TEXTAREA out of a form and missing end tags.
  Moreover nesting a DIV in a TD or a list in a P is risky.
• Opera 6 does not like some spaces (" 7" is different from "7"), font changes, text size reduction, the tag TEXTAREA, relative or absolute positions, java (JRE 6.0)...
  Opera 7 is much better, but not for gif animations before version 7.11.
• Beonex 0.8, Mozilla 1.2 (and browsers using its engine) as well as Off By One cannot send a message with the form provided on the site because of a perl script receiving wrong information (referrer problem).
• Konqueror doesn't interpret ′.
• MSIE accepts syntax errors in HTML and CSS (advantage or disadvantage?).

javascript

• Javascript routines do not give the same result with the different versions of the same browser!
• Animations as well!

• Few common points between Netscape 4 and Netscape 6 javascript.
• MSIE has its own interpretation of many specifications too.
  MSIE 5, not as MSIE 5.5, is blocked by JScript using undefined because it is undefined!
  JScript (more or less compatible with Netscape 6 javascript) give strange results with DIV (document.body.clientHeight for example if hasLayout is not triggered).
• Opera cannot read Hot Potatoes files because of its javascript parsing even if you change the identifier.

CSS

• The problems often depend on the context or conflicts when a rule is overwritten.
• A proper DOCTYPE is often the key to compatibility.
• A lot of problems with p:first-letter or overflow for all the browsers.
• Some CSS2 rules freeze or crash NN4, deactivate links... NN4 doesn't like bold, float, border-style, border-width, margin and padding.
  The colour of the text is not always the parent's.
• Netscape 6 and 7 sometimes ignore margin-top or margin, demand a clear after a float (with display:inline) and often crash when they apply display:none/inline-block (before version 7.2)...
• Konqueror doesn't display the CSS popup of the menu, doesn't like transparent borders or div:hover or link rel="alternate stylesheet" and doesn't obey z-index rules. first-letter mustn't be used with "overflow:hidden". It also has inheritance problems I fixed by adding tags. It often behaves like IE5.5 before version 3.2 or Safari 1.2. A few CSS2 instructions are not implemented...
• MSIE 5 and 5.5 do not add the borders to the text in the menu on the left while Netscape, Mozilla or Opera, as specified by CSS, include the borders in the text block. This bug appears when the same element uses both width and padding/border - with MSIE 6 without a valid DOCTYPE (Quirks mode) and MSIE 5.x.
  MSIE interprets CSS differently within the same version according to the context (this page imports a style sheet which replaces p:first-letter, so that it generates an error in the last paragraph if you use MSIE 6).
  With MSIE 6 p:first-letter and text-decoration do not get along very well.
  div:first-letter gives stunning results.
  Generated content may add 3px, float may trigger the "the Peekaboo Bug" (text appearing/disappearing with brown stylesheet on the page about website mirrors - fixed by adding display:inline-block within conditional comments so that the style validates -or a width or a height- in the wrapping div).
  Another bug with background-color applied to a:hover or with versions 5 and 5.5 using margin-top.
  In lists affected by the "Whitespace Bug" - unwanted space added between the lines when using li{display:block;} - you have to remove all white space in the code between the </li> and the next element (</li><li> and </li></ul>).
  MSIE 5 and MSIE 5.5 dislike comments in rules. (but this is really useful when you need "hacks")
  MSIE often needs hasLayout triggered to display correctly.
  MSIE does not support min-width, max-width...
  MSIE ignores min-height out of a table and, since version 6, position:fixed which gave unexpected results with versions 5 and 5.5.
  With MSIE 5 and 5.5, any class used with P in the box model must be re-defined.
  And so on...
  MSIE 7 fixes a lot of the bugs mentioned above in "Standards Compliance Mode" but hasLayout is even necessary more often. Using height, position:relative or absolute and "hacks" or workarounds for previous versions often break the layout. Many display problems are still present.
  MSIE 8 fixes almost all the display issues and doesn't need hasLayout. The compatibility mode with MSIE 7 is not reliable to perform tests.
• IE Mac doesn't use the same engine as MSIE Win, thus MSIE Win hacks must be hidden.
• A few problems with Opera: link rel="alternate stylesheet", positions (margin-top with versions 5 and 6), the width of the menu on the left, margin-left read as left, a:visited {font-weight:bold;} scrambles all on the screen... height intended to MSIE Win is interpreted.
• display:none; cannot be applied to an anchor with Firefox.
• There is a bug not fixed yet with the latest beta versions of Firefox and Mozilla (from rv:1.8a3 to 1.8b2) when a link has the focus (default style only).

The validation of your CSS styles at the W3C can help you to find errors and tidy your code.
PHP allowed me to detect the browser and send adapted styles (not recommended).
The page about CSS lists the solutions for the site.
Also online, you can find an introduction to page debugging.
You will also find a few pages describing a way of building a tableless stylesheet which will be compatible with many browsers.

A list of existing browsers can be found at Dan's Web Tips.
You can have a look at the comparison of web browsers from Wikipedia.
Web browser standards support are detailed at nanobox.chipx86.com.

Browser statistics here.

For your captures, don't forget to test and compare.