The following is a test of this page of unstyled, generic markup performed in 81 browsers. I used browsercam to take screen captures, then imported the resulting captures into Photoshop. In Photoshop, I zeroed out the top/left coordinates of the HTML canvas (not to be confused with the Canvas element,) and then set the Opacity on each layer to 10%. For the second visualization I simply turned on the difference blending mode at full opacity.
Why? I thought it was an interesting illustration of why we use reset style sheets. There’s almost no consistency in the way these browsers handle even the most generic markup.
Here are the two visualizations:
Overlay
Difference Blending Mode
Full List of the Browsers Tested
| Explorer | Mozilla | Firefox | Safari | Konqueror | Opera | Netscape | AOL | Camino | Chrome | |
|---|---|---|---|---|---|---|---|---|---|---|
| Fedora Core 6 | 1.5.0 2.0.0 3.5.2 |
3.5.4 | 10.00 9.62 |
9.0.0.3 | ||||||
| OSX 10.3 | 5.2 | 1.6 1.7.12 |
2.0.0 | 1.2 1.3 |
9.62 | 7.2 9.0.0 |
1.5.5 | |||
| OSX 10.4 | 5.2 | 1.6 1.7.12 |
2.0.0 3.5.2 |
2.0.2 3.2.3 |
10.00 9.62 |
7.2 9.0.0 |
1.5.5 | |||
| OSX 10.5 | 1.7.12 | 2.0.0 3.5.2 |
3.2.3 4.0.3 |
10.00 9.62 |
9.0.0 | 1.5.5 | ||||
| OSX 10.6 | 3.5.2 | 4.0.3 | 10.00 | |||||||
| Windows 98 | 4.0 | |||||||||
| Windows 2000 Professional | 5.0 5.5 6.02 |
1.6 1.7.12 |
1.5.0 2.0.0 3.5.2 |
10.00 9.62 |
4.78 6.2 7.2 9.0.0 |
9.1 | ||||
| Windows XP | 6.0 7.0 8.0 |
1.6 1.7.12 |
1.5.0 2.0.0 3.5.2 |
3.2.3 4.0.3 |
10.00 9.62 |
6.23 7.2 9.0.0 |
3.0.195 | |||
| Windows Vista | 7.0 8.0 |
2.0.0 3.5.2 |
3.2.3< 4.0.3 |
10.00 9.62 |
9.0.0 | 3.0.195 |
Interesting stuff.