在为多组浏览器开发时,由于浏览器实现的差异,您在开发过程中遇到了哪些问题?
首先,我列出了一些我面临的问题:
或HTML char代码160,您需要替换其等效的Unicode \ u00a 答案 0 :(得分:40)
真正唯一能找到我的人:
如果您对问题本身感兴趣,QuirksMode.org是我每天使用的一个惊人的资源,然后才能实现对客户端库的跨越。另请参阅John Resig在雅虎的The DOM is a Mess演示文稿,该演示文稿提供了有关如何有效处理跨浏览器主题的大量理论。
但是,如果您只想让它们解决,那么您的问题就是为什么许多人考虑使用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(所有请求对象都是still made available)
$('p.message').load('/folder/file.html');
真正让我震惊的是,使用选择器加载数据子集(有关详细信息,请参阅manual)
$('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
}
)
让我想起了乔尔的Can Your Programming Language Do This?文章。
将所有这些都提升到理论水平,真正的进步不是来自你有意识的思考和努力所能做的事情,而是你能够自动完成的事情(没有思想或努力)。 Joel在关于面试和智能开发人员的 Smart And Getting Things Done 中有一个部分,完全改变了我的编程方法。
类似于能够“播放”音乐的钢琴家,因为她知道所有的键,你的进步不是来自做更多需要思考的事情,而是更多不需要思考的事情。然后,目标就是让所有基础变得简单......自然......潜意识......所以我们都可以在我们更高层次的目标上耿耿于怀。
客户端库在某种程度上帮助我们做到这一点。 ;)
答案 1 :(得分:21)
我遇到的大多数问题都是IE,特别是IE6。我亲自处理的问题留下了难忘的印象(没有特别的顺序):
必须使用框架来执行基本操作,因为每个浏览器实现DOM的方式略有不同。这对于IE和AJAX来说尤其令人发指,这需要多个if-blocks才能启动呼叫。在理想的世界中,我可以在没有框架的情况下使用JavaScript来完成基本的工作。
onChange on IE中的选择被执行错误,并且在选择失去焦点之前触发(这是不正确的)。这意味着由于IE,你永远不能使用onChange选择,因为只有键盘的用户会被这个实现问题所困扰。
你在帖子中提到过它,但是当使用getElementBy Id ()时,IE按名称抓取元素会非常痛苦。
在RTL语言环境(阿拉伯语,希伯来语等)中,Firefox实现“text-align:right;”不正确。如果容器由于某种原因而溢出,则文本对齐于可查看容器的右侧,而不是容器本身的右侧(即使它使其中的一部分不可见)。
不同的浏览器在如何结束数组和对象方面具有不同的挑剔程度。例如,使用类似这样的数组的Firefox就可以了:[item0,item1,]“。但是,相同的代码会使Opera barf因为它讨厌尾随的逗号.IE会使数组成为一个三项数组,第三项未定义!这是肯定的错误代码,但是我已经动态生成了javascript,这是一个巨大的重写难题 - 如果这只是有用的话会很好。
所有与IE的hasLayout有关。可怕的痛苦围绕着这个属性,特别是当我不知道它存在时。通过使用hacks添加hasLayout修复了很多问题。由于黑客攻击造成了更多问题。
IE中的浮动很少按照您希望的方式工作。它们在其他浏览器中也常常令人讨厌,但它们至少符合特定的行为。 ;)
IE添加extra white space between list items让我无痛苦,因为YUI使用列表来制作菜单。 (要完全掌握问题,您必须在IE和其他浏览器中并排查看该链接。)
我有很多问题要求文本不要包装在IE中的容器中。其他浏览器听“white-space:nowrap”要好得多。这是我工作的UI的一个问题,它有一个可调整大小的侧边栏;在IE中,如果您调整太多,侧边栏项目将开始换行。
IE6中缺少许多CSS选择器类型意味着您必须对DOM进行超出必要的分类。例如,缺少+,:hover,:first-child。
不同的浏览器对空文本节点的处理方式不同。具体来说,当使用Opera遍历DOM时,我不得不在浏览节点的子节点时担心空文本节点。如果您正在寻找特定项目,这不是问题,但是如果您正在编写需要特定输入的代码以及浏览器查看该输入的方式不同。
在IE6中,当您通过javascript动态生成iframe时,iframe有时不会自动填充其容器(即使宽度和高度设置为max)。我仍然不知道如何解决这个问题,并一直在考虑发布一个问题。
在IE中,您无法在&lt; tbody&gt;上设置溢出CSS。元件。这意味着无法以简单的方式制作可滚动的表格(具有具体的&lt; thead&gt;和&lt; tfoot&gt;)。
我稍后可能会在此列表中添加更多内容,因为(对我而言)Web开发的最糟糕部分是跨浏览器问题。此外,我怀疑我是否会编辑出“我可能会在以后添加更多内容”,因为这些问题是无穷无尽的。 :)
答案 2 :(得分:10)
IE6?咩。你们得到它简单!您从来没有必要在Netscape 4中使CSS布局工作(不会崩溃整个浏览器)?您是否曾经不必为不支持表的设备浏览器编写代码?你从来没有写过 IE Mobile ?
不支持JavaScript分配的事件处理程序;你只能通过在innerHTML中设置“onclick =”somestring“”来编写事件处理程序;
大多数基本的DOM Level 1属性(例如nodeName,nodeType,nodeValue,firstChild,lastChild,nextSibling,previousSibling,data,value,HTMLElement.getElementsByTagName,所有HTMLTableElement成员,大多数CSSStyleDeclaration成员)根本不存在;
大多数CSS布局属性不起作用;许多简单的CSS属性(如'width')不适用于某些元素,如表单字段;
在表格和表单字段等元素上设置许多其他CSS属性会导致即时浏览器挂起,因为Windows Mobile没有内置任务管理器,这意味着您必须软重置设备;
哦,并在&lt; button&gt;内放置除文字之外的任何内容。也是insta-crash;
大量的基本JavaScript方法和“DOM Level 0”方法可以追溯到Netscape 2(!)。
这是微软2009年旗舰Windows Mobile浏览器的最新版本。
当然,它支持XMLHttpRequest,但是在CSS和脚本支持小于IE3(!)的浏览器上编写AJAX代码是奇怪的精神分裂症,就像你正在处理21世纪和19世纪技术的奇怪混合一样
我不推荐它。
答案 3 :(得分:5)
这样做太长时间没有多少问题,但它仍然让我疯狂,我必须破解IE不支持CSS的东西,如display:table,:last-child,和:hover在anchors之外。
所有的IE内容仍然是疯狂的,但现在只是背景疯狂:)
答案 4 :(得分:5)
最大的跨浏览器问题? - Internet Explorer !
&LT; start_grumpy&GT;
IE 完全 负责“阻止网络” - 我们开发人员无法使用HTML5,SVG,XFORMS或CANVAS创建令人惊叹的网站。不是因为Firefox,Safari或Chrome,而是因为2/3的互联网仍然停留在IE上。更不用说~20%的网络仍然停留在IE6上! IE8是IE的第一个版本,至少 尝试 是标准兼容的(2001年的标准),这意味着它将至少 2018 在我们最终开始放弃对IE7的所有支持之前。
&LT; / start_grumpy&GT;
否则命名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 (e.g. Tables and Selects)
答案 5 :(得分:3)
在为Web应用程序开发系统测试框架时,我们必须模拟各种事件,例如点击。我记得我们在IE和FF中找不到任何正常的方法,并且必须以两种不同的方式实现它,并且有大量的伏都教。
我不记得具体细节,但我记得它真的很烦人。
答案 6 :(得分:3)
在Internet Explorer中(注意:IE的旧版本,不一定是版本9/10 +),如果使用document.createElement
创建表单元素,则该字段将不会随表单一起提交。唯一的解决方法是使用
element.innerHTML = "<input type='text' value="+val+" name="+name+">";
答案 7 :(得分:3)
This。
现代的javascript框架(jQuery,prototype等)为让代码同时在很多浏览器中运行创造了奇迹。
我现在面临的最大问题是,任何类型的丰富UI行为都会以惊人的速度运行。 IE7很糟糕。 IE6更糟糕。 IE8有缺陷,有一半完成,并且确实没有IE7好。
最糟糕的是,我认为我们永远不会免于IE6。它是如此无处不在,如此该死的古怪。大量的“企业”(我指的是一家大公司为另一家大公司制作的大型网络应用程序)应用程序使用了高度特定的IE6 javascript,甚至在IE7中都无法运行,更别提其他了。
公司无法完全取代这些应用程序 - 我们正试图向它们推销新应用程序,这意味着IE6支持是强制性的。现在的方式,信贷紧缩的公司削减成本,我估计我们仍将在2015年支持IE6: - (
答案 8 :(得分:2)
在IE中,您无法隐藏选择元素,只能隐藏选择元素本身。这使得使用Javascript动态更改选择选项的内容变得困难。
Safari和Chrome中也存在此问题。
IE存在许多其他问题,但最近这个问题让我感到非常沮丧。
答案 9 :(得分:1)
帮助解决讨厌的IE显示问题的简单方法是在IE 6/7/8中使用firebug,Yep enen只需使用Firebug Lite
如果您将以下内容添加为书签并将其粘贴在工具栏上,则只需单击一下即可启用任何网页上的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);
答案 10 :(得分:1)
要在Internet Explorer中删除iframe边框,您必须将frameborder属性指定为camelCase格式,该格式不符合xhtml。
<iframe frameBorder="0"/>
答案 11 :(得分:1)
我正在研究CSS布局,这个人认为给予元素的大小是大小+填充+边框,就像在IE5中一样,而不仅仅是官方规范中解释的内容框。它只是在几个月前写的所以他做了肮脏的黑客让它在IE7中看起来很好看。我用FireBug花了几个小时来追踪问题的根源,当我意识到它时,我真的很生气。
如果您在Firefox中打开为IE5编写的“浮动”CSS的网站,那么这些框就没有足够的空间来适应并落在页面上。如果你在IE7中打开它看起来不错,因为IE7让边框重叠,所以看起来几乎是正确的。对于像我一样经验不足的人,很难注意到。
答案 12 :(得分:1)
我唯一的噩梦是IE6,你应该总是寻找黑客,但每当你遇到问题时,都有人在你面前遇到它并写博客(我们永远不会离开它)
答案 13 :(得分:1)
处理表单时CSS框模型的不一致。特别是每个浏览器处理&lt; select&gt;的方式令人恼火。框
答案 14 :(得分:1)
我最大的问题是浏览器制造商。傲慢的小* ^&amp;%s。我的意思是,你不能向任何人出售浏览器,但是每个人都在他们的小角落试图互相做对方,只创造分裂。哦,Chrome。 Chrome仍然不知道它想成为什么,Safari或Firefox。除了它的一个客厅技巧,它实际上没用。我责怪所有那些因为你讨厌垄断而继续谷歌搜索的人。猜猜看,他们现在是垄断者。现在我们都可以享受二流的,过早推出的软件。
这主要源于我今天在Chrome中遇到的一个错误*我从来没有意识到要查询浏览器。 Safari和Chrome都失败了,所以我觉得嘿,一旦我解决了Safari问题,Chrome会自动修复,但不,不。先生“我在单独的过程中运行标签”AKA“Sr. No full screen”只是让我在蜥蜴锁中抱着令人难以置信的实施。
我也讨厌Firefox。我不知道我是否有病毒感染或Firebug运行。现在,直到Adobe决定发布一个让Flash适用于电影片段以外的其他东西的浏览器,我很长时间都会有一些令人讨厌的东西。我们都知道这就是生活的全部。
此外,当我遇到让我的脑汁运转的荒谬错误时,我只喜欢编程。
答案 15 :(得分:1)
Firefox和IE在DOM中有不同的表设置,其中一个,单元格的所有兄弟是其他单元格,而另一个单元格之间有元素。我不记得它是哪种方式,但它让我在一个应用程序中真正头痛。
答案 16 :(得分:1)
对于Firefox,要获取完整数据,您需要在调用node.firstChild或使用node.textContent之前使用node.normalize,这两者都是Mozilla特定方法
实际上所有这些都是绝大多数浏览器支持的W3C DOM方法。我想你会发现他们也在IE中工作。
我最大的跨浏览器问题是,仍然有人在使用IE浏览器。
第二大问题是即使在遵循标准的浏览器中,在CSS中做一些事情仍然是不可能的;例如tbody {overflow:auto}
除了Gecko之外没什么用处,甚至它也有bug。
答案 17 :(得分:1)
IE对表格使用DOM操作的限制迫使我采取完全不同的方法。一开始非常令人沮丧,但积极的是第二种方法最终更好,所以我想我应该感谢IE。 ;)