跨浏览器兼容性的典型缺陷[关闭]答案

【问题标题】：Typical pitfalls of cross-browser compatibility [closed]跨浏览器兼容性的典型缺陷[关闭]
【发布时间】：2012-08-08 22:53:25
【问题描述】：

主要桌面浏览器中最常见的浏览器兼容性问题是什么？

请不要重复。您遇到的投票问题。我希望列表能够自我排序。 “IE sux”不是一个陷阱，而是呼吁投反对票。

[编辑] 是的，我知道这是一项民意调查——我不会在此发布答案来收集积分——我实际上很想知道人们通常会遇到什么。

【问题讨论】：

我相信随着 JQuery 等新的 Javascript 框架的出现，这个问题不再是一个大问题了..
Gulzar - 我同意这个问题的 JavaScript 方面，但不同意 HTML、CSS 部分。
Halftor：我鼓励你重新表述你的问题，以便用一个答案来回答。
弗洛里安：我记下这个问题怎么样？你知道我描述的社区列表吗？
Halfthor：我什么都不知道。顺便提一句。我对民意调查表示反对并不是因为其中很多都是关于民意调查的，而是因为民意调查根本不是 stackoverflow 的内容。

标签： javascript html css cross-browser

【解决方案1】：

Internet Explorer 6 中的透明 PNG，尤其是因为使用 AlphaImageLoader 的常见、无 JavaScript 的解决方法可能会产生 locking up IE6 的副作用。

【讨论】：

pffft，到底谁真正使用透明 PNG？ ;)
我经常使用 png24 并在 IE6 中支持它们，但我从来没有遇到过这个问题。
在互联网或内部网站上？我认为我们在内部网络上组合了许多较大的图像文件（总共约 900k）可能会导致问题，因为下载速度比通过 Internet 快。

【解决方案2】：

CSS - 在现代浏览器中大部分被整理出来，但仍然是一个问题 - 特别是与布局有关的问题。

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

【讨论】：

【解决方案3】：

缓存和前一页哈希。

【讨论】：

你能详细说明一下吗？哪些浏览器的行为与预期不符？

【解决方案4】：

内存管理可能是个问题 - 不同的垃圾收集器会因不同类型的循环引用而窒息，尽管 Firefox 在正确清理复杂对象方面做得相当不错。

【讨论】：

【解决方案5】：

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

有一次我使用了一个很好的递归函数来获取文档中元素的位置：

function getOffsetTop (element) {
    var offset = 0;

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

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

    return offset;
}

不幸的是，当为非常深的节点层次结构中的元素调用此方法时，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;
}

【讨论】：

【解决方案6】：

浮动。在 IE6/7 中有无数的浮动错误 - Peekabo、guillotine、double margin、escaping floats、3px gap、duplicate characters，许多清除错误，与可用空间相关的错误。 ..

【讨论】：

【解决方案7】：

Quirksmode 列出了许多需要注意的不同之处！-)

-- 但他像网络上的大多数其他网站和博主一样，专注于自己的方式，这会导致一些小或大的错误和不一致......

【讨论】：

QM 这是一个全面的列表，但很难涉足，并且不会根据您遇到问题的可能性来衡量问题。谢谢。
@Hafthor：你说的很对……

【解决方案8】：

我能想到的最常见的问题 - 仅在这周我就遇到了两次问题 - 是 IE6 和盒子模型错误。查一下！

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

所以不是三列，而是两列，第三列在屏幕底部的某个地方——你想要：

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

但你得到：

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

【讨论】：

【解决方案9】：

当执行 XMLHttpRequest 并执行函数“onreadystatechange”时，XMLHttpRequest.responseText 属性包含在 Firefox 中加载的数据，但在 IE（可能还有 Safari）中不包含。

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

【讨论】：

【解决方案10】：

我创建的每个固定宽度、居中的网站——即在某些包含 div 的地方使用“margin:0 auto”来使所有内容居中——在我测试它并应用“hack”之前无法在 IE6 上工作。这让我每次都感到震惊。

【讨论】：