您遇到了什么跨浏览器问题？ [英] What Cross-Browser issues have you faced?

问题描述

在开发多套浏览器的同时，由于浏览器实现的差异，您在开发过程中遇到什么问题？

While developing for multiple sets of browsers, what issues have you faced while development due to differences in browser implementation?

首先我列出了一些我面对：

To start with I am listing some of those which i faced:

• Firefox中的文本节点只允许4K数据。因此，一个XML Ajax响应分为多个文本子节点，而不是仅一个节点。它在Internet Explorer中很好。对于Firefox，要获取完整的数据，您需要在调用node.firstChild之前使用node.normalize或使用node.textContent，这两个都是Mozilla的具体方法。


• Internet Explorer不替换& nbsp; 或HTML char代码160，您需要在Firefox中替换其Unicode等价物\\\ 


• 在Firefox中动态创建表单中的输入字段（使用document.createElement创建）不会在表单提交上传递其值。


• 即使元素名称匹配，Internet Explorer中的document.getElementById也会返回一个元素。如果id匹配，Mozilla只返回元素。


• 如果选择框中没有任何选项表示值，Internet Explorer将显示空白，Firefox显示第一个选项。 li>
  

• A text node in Firefox allows only 4K data. So an XML Ajax response gets split up into multiple text child nodes instead of only one node. Its fine in Internet Explorer. For Firefox, to get the full data you either need to use node.normalize before you call node.firstChild or use node.textContent, both of which are Mozilla specific methods
• Internet Explorer does not replace   or HTML char code 160, you need to replace its Unicode equivalent \u00a0
• In Firefox a dynamically created input field inside a form (created using document.createElement) does not pass its value on form submit.
• document.getElementById in Internet Explorer will return an element even if the element name matches. Mozilla only returns element if id matches.
• In Internet Explorer if a select box has a value not represented by any of the options, it will display blank, Firefox displays the first option.

推荐答案

我的大部分问题都是IE，特别是IE6。我个人处理的问题留下了难忘的印象（没有特别的顺序）：

Most of the problems I have are with IE, specifically IE6. Problems I personally deal with that have left a memorable impression (in no particular order):

• 不得不使用框架来做基本因为每个浏览器实现DOM有点不一样。这对于IE和AJAX来说是非常令人发指的，因为它需要多个if-block才能使呼叫开始。在理想的世界中，我可以在没有框架的JavaScript中工作，做基本的事情。

• Having to use frameworks to do basic things because each browser implements the DOM a little differently. This is especially heinous with IE and AJAX, which necessitates multiple if-blocks just to get the call started. In an ideal world I'd be able to work in JavaScript without the framework to do basic things.

onChange在IE中的选择被执行错误，并且触发之前选择失去焦点（这是不正确的）。这意味着您不能使用onChange与IE进行选择，因为仅键盘用户将被这个实现问题瘫痪。

onChange on selects in IE are implemented wrong, and fire before the select loses focus (which is incorrect). This means you can never use onChange with selects due to IE, since keyboard-only users will be crippled by this implementation issue.

你在你的帖子中提到，但是当使用getElementBy Id （）

You mentioned it in your post, but it's a huge pain when IE grabs an element by name when using getElementById().

当RTL语言环境中时，IE通过名称获取元素是一个巨大的痛苦（阿拉伯语，希伯来语等），Firefox实现text-align：right;不正确。如果容器由于某种原因溢出，文本将与可见容器的右侧对齐，而不是容器本身的右侧（即使它的一部分不可见）。

When in an RTL locale (Arabic, Hebrew, etc.), Firefox implements "text-align: right;" incorrectly. If the container overflows for some reason, the text aligns to the right side of the viewable container, rather than the right side of the container itself (even if it makes part of it invisible).

不同的浏览器对于如何结束数组和对象有不同的挑剔程度。例如，Firefox的数组看起来像这样：[item0，item1，]，但是同样的代码会使Opera barf因为讨厌尾随逗号，IE将使数组成为三项数组，第三个项目未定义！这是不错的代码肯定，但有动态生成的JavaScript我已经工作，这是一个巨大的痛苦重写 - 如果这只是工作，这将是很好的。

Different browsers have differing levels of pickiness with regards to how you end arrays and objects. For example, Firefox is more than okay with an array looking like this: [ item0, item1, ]". However, this same code will make Opera barf because it hates the trailing comma. IE will make the array a three-item array, with the third item undefined! This is bad code for sure, but there's been dynamically generated javascript I've worked on that was a huge pain to rewrite - would've been nice if this just worked.

与IE的 hasLayout 有关的所有内容特别是当我不知道它存在的时候，非常可怕的痛苦就是这样的，特别是当使用黑客来添加hasLayout时，很多问题都会被修复，因为这些黑客造成了许多问题。

Everything having to do with IE's hasLayout. So much awful pain has revolved around this attribute, especially when I didn't know it existed. So many problems fixed by using hacks to add hasLayout. So many more problems created as a result of the hacks.

IE中的浮动版本很少按照希望执行的方式工作，而且在其他浏览器中也很烦人，但至少符合特定行为;）

Floats in IE rarely work the way you hope they do. They also tend to be annoying in other browsers, but they at least conform to a particular behavior. ;)

IE添加列表项之间的额外的空格使我没有结束痛苦，因为YUI使用列表来使他们菜单。 （要完全掌握问题，您必须在IE和另一个浏览器中并行查看该链接。）

IE adding extra white space between list items has caused me no end of pain, since YUI uses lists to make their menus. (To fully grasp the issue, you have to view that link in IE and another browser side by side.)

我有很多问题，包装在IE中的容器中。其他浏览器听white-space：nowrap好多了。这是一个问题，我工作的UI有一个可调整大小的边栏;在IE中，如果您调整其大小，侧边栏项目将开始换行。

I have lots of issues getting text not to wrap in containers in IE. Other browsers listen to "white-space: nowrap" a lot better. This has been a problem with a UI I worked on that has a resizable sidebar; in IE, the sidebar items will start to wrap if you resize it too much.

IE6中缺少许多CSS选择器类型，你的DOM不仅仅是必要的。例如，缺少+，：hover，：first-child。

The lack of many CSS selector types in IE6 means you have to class-up your DOM more than necessary. For example, the lack of +, :hover, :first-child.

不同的浏览器对待空文本节点不同。具体来说，当使用Opera遍历DOM时，浏览节点的子节点时，我必须担心空文本节点。如果您正在寻找一个特定的项目，这不是问题，但如果您正在编写期望特定输入的代码以及浏览器查看输入的方式不同。

Different browsers treat empty text nodes differently. Specifically, when traversing the DOM with Opera, I have to worry about empty text nodes when browsing a node's children. This isn't a problem if you're looking for a particular item, but it is if you're writing code that expects a particular input and the way the browser views that input differs.

在IE6中，当您通过javascript动态生成iframe时，iframe有时不会自动填充其容器（即使宽度和高度设置为max）。我仍然不知道如何解决这个问题，并一直在考虑发布一个问题。

In IE6, when you dynamically generate an iframe via javascript, the iframe sometimes doesn't fill its container automatically (even with width and height set to max). I still don't know how to solve this issue, and have been thinking of posting a question about it.

在IE中，您不能设置溢出< tbody>元素上的CSS。这意味着可滚动表格（具体<>>和< tfoot>）不可能以简单的方式进行。

In IE, you can't set overflow CSS on the <tbody> element. This means that scrollable tables (with a concrete <thead> and <tfoot>) are impossible to make in a simple manner.

我稍后可能会添加更多的列表，因为（对我来说）Web开发的最糟糕的部分是跨浏览器问题。此外，我怀疑我会编辑稍后可能会添加更多列表，因为这些问题是无止境的。 ：）

I will probably add more to this list later, since (to me) the worst part of web development are cross-browser issues. Also, I doubt I'll ever edit out the "I will probably add more to this list later", since these problems are endless. :)

这篇关于您遇到了什么跨浏览器问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！