Typical pitfalls of cross-browser compatibility [closed]

StackOverflow https://stackoverflow.com/questions/154132

Question

What are the most common browser compatibility issues across the major desktop browsers?

No dups please. Up-vote problems you've run into. I'm hoping for the list to self-sort. "IE sux" is not a pitfall, but a call for down-vote.

[Edit] Yes, I know it's a poll - I'm not posting answers in this to gather points - I'm actually interested in knowing what people typically run into.

Was it helpful?

Solution

Quirksmode has a comprehensive list of a lot of differencies requiring attention !-)

-- but he is, like most other sites and bloggers on the net, focused in his way, and that results in some minor or major bugs and inconsistencies ...

OTHER TIPS

Transparent PNGs in Internet Explorer 6, especially because the common, JavaScript-less workaround of using the AlphaImageLoader can have the side effect of locking up IE6.

CSS - largely sorted out in the modern browsers, but still an issue - particularly as pertains to layout.

Note that this is not critical - but it is a compatibility issue I almost always end up coming back to when designing a site.

caching, and previous page hashes.

Memory management can be an issue - different garbage collectors choke on different types of circular references, although firefox is getting pretty good at cleaning up complex objects properly.

I've found that IE 6 has pretty small limits to the allowed stack depth.

At one point I was using a nice recursive function to get the position of an element in the document:

function getOffsetTop (element) {
    var offset = 0;

    if (element.offsetTop)
        offset = offset + element.offsetTop;

    if (element.offsetParent)
        offset = offset + getOffsetTop(element.offsetParent);   

    return offset;
}

Unfortunately when calling this method for elements in a very deep node hierarchy, IE complains of exceeding the maximum stack size (I forget the exact error message). To get around this I needed to use an iterative approach to keep the stack size small:

function getOffsetTop (element) {
    var offset = 0;

    if (element.offsetTop)
        offset = offset + element.offsetTop;

    var parent = element.offsetParent;
    while (parent) {
        if (parent.offsetTop)
            offset = offset + parent.offsetTop;
        parent = parent.offsetParent;
    }

    return offset;
}

Floats. There are an endless number of float bugs in IE6/7 - Peekabo, guillotine, double margin, escaping floats, 3px gap, duplicate characters, a number of clearing bugs, bugs related to the available space...

The most common one I can think of -- and it's been a problem for me twice this week alone -- is IE6 and the box model bug. Look it up!

Specifically, the problem I'm thinking of is when you have floated DIVs which the developer thinks all fit within a wrapper DIV, but they don't in IE6 because they're slightly bigger.

So rather than three columns, you end up with two, and your third is down at the bottom of the screen somewhere -- you want:

   +-------------------------------+
   |+------+ +-----------+ +------+|
   ||      | |           | |      ||
   || foo  | |   bar     | | baz  ||
   ||      | |           | |      ||
   ||      | |           | |      ||
   |+------+ +-----------+ +------+|
   +-------------------------------+

but you get:

   +-------------------------------+
   |+--------+ +------------+      |
   ||        | |            |      |
   ||  foo   | |    bar     |      |
   ||        | |            |      |
   ||        | |            |      |
   |+--------+ +------------+      |
   |+------+                       |
   ||      |                       |
   ||      |                       |
   || baz  |                       |
   ||      |                       |
   ||      |                       |
   |+------+                       |
   +-------------------------------+

When performing an XMLHttpRequest and executing a function 'onreadystatechange' the XMLHttpRequest.responseText property contains the data loaded at that point in Firefox, but not in IE (and maybe Safari).

This prevents the capture of partial data in those browsers for use in displaying an execution progress meter.

Every fixed width, centered site I've created -- i.e. using 'margin:0 auto' on some containing div to center everything up -- fails to work on IE6 until I test it and apply a 'hack'. This gets me every time.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top