您遇到什么跨浏览器问题?

在开发多套浏览器的同时,由于浏览器实现的差异,您在开发时遇到了哪些问题?

首先我列出一些我面对的问题:

  • Firefox中的文本节点只允许4K数据。 所以XML Ajax响应被分成多个文本子节点,而不是只有一个节点。 它在Internet Explorer中很好。 对于Firefox,为了获得完整的数据,您需要在调用node.firstChild或使用node.textContent之前使用node.normalize,这两者都是Mozilla特定的方法
  • Internet Explorer不会取代  或HTML字符代码160,则需要replace其等同的Unicode \ u00a0
  • 在Firefox中,表单内dynamic创build的input字段(使用document.createElement创build)不会在表单提交上传递其值。
  • 即使元素名称匹配,Internet Explorer中的document.getElementById也会返回元素。 如果id匹配,Mozilla只返回元素。
  • 在Internet Explorer中,如果select框的值不是由任何选项表示的,则它将显示为空,Firefox将显示第一个选项。

我所遇到的大部分问题都是IE,特别是IE6。 我亲自处理的问题留下了难忘的印象(没有特别的顺序):

  • 不得不使用框架来做基本的事情,因为每个浏览器都以不同的方式实现DOM。 这对于IE和AJAX来说是非常令人发指的,因为IE和AJAX需要多个if-blocks来启动通话。 在一个理想的世界里,我可以在没有框架的情况下使用JavaScript来完成基本的事情。

  • IE上的onChange选项实现错误,并在select失败之前失败焦点(这是不正确的)。 这意味着你永远不能使用onChange和IE的select,因为只有键盘的用户会因为这个实现问题而受到损害。

  • 你在你的文章中提到过,但是当IE使用getElementBy Id ()时,通过名字来获取元素是一个巨大的痛苦。

  • 在RTL语言环境(阿拉伯语,希伯来语等)中,Firefox实现“text-align:right”。 不正确。 如果容器由于某种原因溢出,则文本与可见容器的右侧alignment,而不是容器的右侧(即使它的一部分不可见)。

  • 对于如何结束数组和对象,不同的浏览器具有不同的挑剔程度。 例如,火狐浏览器看起来像是这样的一个数组:[item0,item1,]“。但是,这个代码会使Opera的barf,因为它讨厌尾随的逗号。IE会使数组成为一个三项数组,与第三个项目undefined!这是肯定的错误的代码,但有一个dynamic生成的JavaScript我已经工作,这是一个巨大的痛苦重写 – 会一直很好,如果这只是工作。

  • 一切都与IE的hasLayout 。 围绕着这个特性,这个可怕的痛苦,特别是当我不知道它存在的时候。 如此多的问题通过使用hack添加hasLayout来解决。 由于黑客而造成更多的问题。

  • 在IE中漂浮很less以你希望的方式工作。 他们也往往在其他浏览器恼人,但他们至less符合一个特定的行为。 ;)

  • IE 在列表项之间添加额外的空白已经让我无法忍受痛苦,因为YUI使用列表来制作菜单。 (为了完全理解这个问题,你必须在IE和另一个浏览器中查看链接。)

  • 我有很多问题让文本不能包装在IE中的容器。 其他浏览器听“白色空间:nowrap”好多了。 这是一个我工作过的UI有一个可resize的侧边栏的问题; 在IE中,如果你调整了太多的边栏条目,它们就会开始包装。

  • IE6中缺less许多CSSselect器types意味着您必须更多地对DOM进行分类。 例如,缺less+,:hover,:first-child。

  • 不同的浏览器以不同的方式处理空白文本 具体来说,当使用Opera遍历DOM时,在浏览节点的子节点时,我不得不担心空的文本节点。 如果你正在寻找一个特定的项目,这不是一个问题,但是如果你正在编写需要特定input的代码,以及浏览器查看input的方式不同。

  • 在IE6中,当通过JavaScriptdynamic生成iframe时,iframe有时不会自动填充容器(即使宽度和高度设置为max)。 我仍然不知道如何解决这个问题,并一直在考虑发表一个关于它的问题。

  • 在IE中,你不能在<tbody>元素上设置溢出CSS。 这意味着可滚动的表格(具体的<thead>和<tfoot>)不可能以简单的方式制作。

以后我可能会在这个列表中添加更多内容,因为(对我而言)Web开发中最糟糕的部分是跨浏览器问题。 另外,我怀疑我会不会编辑出“我可能稍后再添加到这个列表中”,因为这些问题是无止境的。 🙂

唯一真正对我的是:

  • IE6仍被大约18%的networking所使用 – 几乎是1/5 – 解决它的问题是耗时,骇人听闻和令人沮丧的。 ;)这里的问题真是太多了。

如果您对这些问题本身感兴趣, QuirksMode.org是我在每次使用客户端库之前每天使用的一个令人惊叹的资源。 还请看看John Resig的The DOM是在雅虎的一个乱七八糟的演示文稿,它提供了很多有关如何有效地处理跨浏览器主题的理论。

然而,如果你只是想解决它们,那么你的问题就是为什么许多人会考虑使用像jQuery , YahooUI , MooTools , Dojo等客户端库的一个很好的例子。随着社区的兴旺,人才和企业支持项目像那些让你专注于你的应用程序,而不是这些问题。

这里有一些jQuery的例子,避免了跨浏览器的挫折,真的可以使所有这些..乐趣。

跨浏览器鼠标点击绑定

 $('#select anything + you[want=using] ~ css:selectors').click( function(){ alert('hi'); } ); 

跨浏览器的HTML注入

 $('#anElementWithThisId').html('<span>anything you want</span>'); 

跨浏览器的Ajax(所有请求对象仍然可用 )

 $('p.message').load('/folder/file.html'); 

而真正让我失望的是,用select器加载一个数据子集(详见手册 )

 $('p.message').load('/folder/file.html body p:first-child'); 

现在,所有这些真的开始变得有趣起来:将方法链接在一起

 $('ul.menu a').click( // bind click event to all matched objects function(evt){ // stnd event object is the first parameter evt.preventDefault(); // method is cross-browser thx to jquery $(this) // this = the clicked 'a' tag, like raw js .addClass('selected') // add a 'selected' css class to it .closest('ul.menu') // climb the dom tree back up to the ul .find('a.selected') // find any existing selected dom children .not(this) // filter out this element from matches .removeClass('selected'); // remove 'selected' css class } ) 

让我想起乔尔的“你的编程语言能做到这一点吗? 文章。

把所有这些都置于理论层面,真正的进步并不是来自于你有意识的思考和努力,而是你可以自动做什么(没有思想或努力)。 Joel在Smart And Gets Done Done上有关于面试问题和智能开发人员的细分,彻底改变了我的编程方法。

类似于只能“弹奏”音乐的钢琴家,因为她知道所有的琴键,所以你的进步不是来自做更多需要思考的事情,而是更多的事情,而不需要任何思考。 目标就是使所有的基础变得容易..自然的潜意识..所以我们都可以在我们更高层次的目标上进行挖掘。

客户端库在某种程度上帮助我们做到这一点。 ;)

IE6? 咩。 你们已经很容易了 ! 你从来没有在Netscape 4中使CSS布局工作(没有崩溃整个浏览器)? 您从来不必为不支持表的设备浏览器编写代码? 你从来没有写过IE移动

  • 不支持JavaScript分配的事件处理程序; 您只能通过在innerHTML中设置“onclick =”somestring“”来编写事件处理程序;

  • 最基本的DOM级别1属性(例如nodeName,nodeType,nodeValue,firstChild,lastChild,nextSibling,previousSibling,data,value,HTMLElement.getElementsByTagName,所有HTMLTableElement成员,大多数CSSStyleDeclaration成员)根本不存在;

  • 大多数CSS布局属性不起作用; 许多简单的CSS属性,如“宽度”不适用于某些元素,如表单域;

  • 设置表格和表单域等元素上的许多其他CSS属性会导致浏览器挂起,这是由于Windows Mobile没有内置的任务pipe理器,意味着您必须软重置设备;

  • 哦,除了文本以外的任何东西都会崩溃,

  • 大量的基本的JavaScript方法和“DOM Level 0”方法都只能追溯到Netscape 2(!)。

这是2009年微软旗舰Windows Mobile浏览器的最新版本。

当然,它支持XMLHttpRequest,但是在其CSS和脚本支持小于IE3(!)的浏览器上编写AJAX代码是一种奇怪的精神分裂症,就像您正在使用21世纪和19世纪的奇怪混合技术一样。

我不会推荐它。

一直这样做太长,以至于有很多问题,但是我仍然坚持认为,IE不支持像display:table:last-child这样的CSS,并且:在锚点之外hover。

所有IE的东西仍然疯狂,但它只是背景疯狂现在:)

最大的跨浏览器问题? – Internet Explorer

<start_grumpy>

IE 全权负责“阻止networking” – 我们的开发人员不能使用HTML5,SVG,XFORMS或CANVAS创build出色的网站…不是因为Firefox,Safari或Chrome,而是因为2/3的互联网依然停留在IE上。 更何况〜20%的网页仍然停留在IE6上! IE8是IE的第一个版本,至less试图成为标准兼容(即2001年的标准),这意味着至less要到2018年才能开始放弃对IE7的所有支持。

</ start_grumpy>

否则命名一个IE浏览器完全支持的DOM方法…这是一个难以回答的事实是我最大的CrossBrowser问题。

 getElementById() - badly broken getElementsByName() - buggy getElementsByTagName() - buggy getAttribute() - buggy setAttribute() - majorly broken createElement() - buggy appendChild() - buggy 

即使IE发明的东西都搞砸了…

 innerHTML (getting) - returns the worst markup possible innerHTML (setting) - doesn't work on the elements you'd want to dump a bunch of data into (eg Tables and Selects) 

在开发Web应用程序的系统testing框架时,我们必须模拟各种事件,如点击。 我记得我们在IE和FF中找不到任何正常的方法,只好用两种不同的方式来实现,有很多伏都教。

我不记得具体情况,但是我记得这真的很烦人。

这基本上。

现代的JavaScript框架(jQuery,原型等)已经做了奇迹,让代码在许多浏览器一次工作。

我现在面临的最大问题是,任何一种丰富的用户界面行为都运行得非常慢。 IE7是坏的。 IE6更糟。 IE8是越野车,一半完成,并没有比IE7更好。

最糟糕的是,我不认为我们将永远免费的IE6。 它如此无处不在,而且该死的古怪。 大量的“企业”(我的意思是一家大公司为大公司制作的大型networking应用程序)的应用程序使用高度特定的IE6 JavaScript,甚至不能在IE7中工作,别无所求。

公司不能完全替代这些应用程序 – 我们正试图向他们出售新的应用程序,这意味着IE6的支持是强制性的。 现在的情况是,在信贷紧缩的公司削减成本的时候,我认为我们在2015年仍然会支持IE6 🙁

在IE浏览器(注意IE的老版本,不一定是版本9/10 +),如果你使用document.createElement创build表单元素,这个字段将不会被提交。 唯一的解决方法是使用

 element.innerHTML = "<input type='text' value="+val+" name="+name+">"; 

在IE中,你不能隐藏select元素,只能select元素本身。 这使得使用Javascriptdynamic地改变select选项的内容变得困难。

Safari和Chrome中也存在这个问题。

IE还有很多其他的问题,但是这个最近让我感到最为沮丧。

IE在表格上使用DOM操作的限制迫使我采取完全不同的方法。 一开始非常令人沮丧,但是积极的一面是第二种方法最终更好,所以我想我应该感谢IE。 ;)

对于Firefox,为了获得完整的数据,您需要在调用node.firstChild或使用node.textContent之前使用node.normalize,这两者都是Mozilla特定的方法

实际上,所有这些都是绝大多数浏览器支持的W3C DOM方法。 我想你会发现他们也在IE中工作。

我最大的跨浏览器问题是有人还在使用IE浏览器。

其次,即使在遵循标准的浏览器中,在CSS中做一些事情也是不可能的。 例如tbody {overflow:auto}在除了Gecko之外什么都没有用,甚至在那里它也有错误。

Firefox和IE在DOM中有不同的表格设置,其中一个单元格的所有同胞都是其他单元格,另一个单元格之间有元素。 我不记得是什么方式,但是在一个应用程序中,它让我非常头痛。

我最大的问题是浏览器制造商。 傲慢的小* ^&%s。 我的意思是,你不能把浏览器卖给任何人,但是每个人都在他们的小angular落里,试图互相干涉,只是build立分工。 哦,铬。 Chrome仍然不知道它想要的是什么,Safari或Firefox。 除了一个客厅的伎俩,其实际上是无用的。 我怪你们所有因为讨厌垄断而一直在search的人。 猜猜看,他们现在是垄断者。 现在我们都可以享受二stream的,过早推出的软件。

这主要是由于我今天在Chrome中遇到了一个bug,我从来没有想过要查询浏览器。 Safari和Chrome都失败了,所以我想嘿,一旦我解决了Safari的问题,Chrome会自动修复,但是哦,不,不。 先生“我在单独的进程中运行标签”AKA“高级没有全屏”只是不得不抱着我的蜥蜴locking,令人难以置信的执行。

我也厌恶Firefox。 我不知道我是否有病毒感染或萤火虫运行。 现在,直到Adobe决定发布一个浏览器,让除了电影剪辑以外的其他事物成为实用的Flash,我很长时间以来都会有一些讽刺的东西。 我们都知道这就是生活的全部。

另外,当我遇到可笑的错误时,我只喜欢编程,这使得我的脑力运转。

处理表单时,CSS框模型中的不一致。 特别是每个浏览器如何处理<select> Box都是令人讨厌的

我唯一的噩梦就是IE6,你应该总是寻找黑客,但是每次遇到问题时,都会有人在你之前遇到它,并且在这里发表了博客(我们永远不会离开它)

我正在编写CSS布局,他们认为给IE5的大小是+ size + padding + border,而不是官方说明中的内容框。 这是几个月前写的,所以他做了肮脏的黑客,使其在IE7中看起来不错。 FireBug花了我几个小时的时间来追踪问题的根源,当时我意识到我真的很烦。

如果您在Firefox中为“IE5”写的“浮动”CSS打开网站,那么这些框就没有足够的空间来放置页面。 如果你在IE7中打开它看起来不错,因为IE7让边界重叠,所以看起来几乎是正确的。 对于一个没有经验的人来说,我很难注意到。

要删除Internet Explorer中的iframe边框,必须将frameborder属性指定为非xhtml兼容的camelCase格式。

 <iframe frameBorder="0"/> 

一个简单的方法来帮助讨厌的IE浏览器显示问题是使用萤火虫,IE浏览器6/7/8只是使用Firebug Lite

如果您将以下内容添加为书签并将其粘贴到工具栏上,只需单击一下即可启动萤火虫识别。 (只在IE浏览器中检查,它工作正常。)

 javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);