跨浏览器兼容性的典型缺陷

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.

请不要重复。你遇到的投票问题。我希望列表能够自我排序。 “IE sux”并不是一个陷阱,而是要求投票。

[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.

[编辑]是的,我知道这是一个民意调查 - 我不是在这里发布答案来收集积分 - 我真的很想知道人们通常会遇到什么。

10 个解决方案

#1

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

Quirksmode有很多需要注意的差异列表! - )

-- 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 ...

- 但是,就像大多数其他网站和网络上的博客一样,他专注于他的方式,这会导致一些轻微或重大的错误和不一致......

#2

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.

Internet Explorer 6中的透明PNG,特别是因为使用AlphaImageLoader的常见,无JavaScript的解决方法可能会产生锁定IE6的副作用。

#3

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

CSS - 主要在现代浏览器中进行整理,但仍然是一个问题 - 特别是与布局有关。

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

请注意,这并不重要 - 但这是一个兼容性问题,我几乎总是在设计网站时回归。

#4

caching, and previous page hashes.

缓存和上一页哈希。

#5

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.

内存管理可能是一个问题 - 不同的垃圾收集器会阻塞不同类型的循环引用,尽管firefox在正确清理复杂对象方面非常擅长。

#6

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

我发现IE 6对允许的堆栈深度有很小的限制。

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:

不幸的是,当在非常深的节点层次结构中为元素调用此方法时,IE会抱怨超出最大堆栈大小(我忘记了确切的错误消息)。为了解决这个问题,我需要使用迭代方法来保持堆栈大小:

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;
}

#7

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...

浮动。在IE6 / 7中有无数的浮动错误 - Peekabo,断头台,双边距,逃逸浮动,3px间隙,重复字符,一些清除错误,与可用空间相关的错误......

#8

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!

我能想到的最常见的一个 - 这本身就是我本周两次的问题 - 是IE6和盒子模型的错误。抬头看!

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.

具体来说,我正在考虑的问题是当你浮动DIV时开发人员认为所有DIV都适合包装DIV,但是他们不会在IE6中因为它们稍大一些。

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  |                       |
   ||      |                       |
   ||      |                       |
   |+------+                       |
   +-------------------------------+

#9

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).

执行XMLHttpRequest并执行函数'onreadystatechange'时,XMLHttpRequest.responseText属性包含在Firefox中该点加载的数据,但不包含在IE(也可能是Safari)中。

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

这可以防止在那些浏览器中捕获部分数据以用于显示执行进度表。

#10

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.

我创建的每个固定宽度,居中的网站 - 即在某些包含div上使用'margin:0 auto'将所有内容都集中在一起 - 在我测试它并应用'hack'之前无法在IE6上工作。这让我每次都这样。

#1