在为多组浏览器开发时,由于浏览器实现的差异,您在开发过程中遇到了哪些问题？
首先,我列出了一些我面临的问题:
Firefox中的文本节点仅允许4K数据.因此,XML Ajax响应被分成多个文本子节点而不是一个节点.它在Internet Explorer中很好用.对于Firefox,要获取完整数据,您需要在调用node.firstChild或使用node.textContent之前使用node.normalize,这两者都是Mozilla特定方法
Internet Explorer不替换 或HTML char代码160,您需要替换其等效的Unicode\u00a0
在Firefox中,表单内的动态创建的输入字段(使用document.createElement创建)不会在表单提交上传递其值.
即使元素名称匹配,Internet Explorer中的document.getElementById也将返回一个元素.如果id匹配,Mozilla只返回元素.
在Internet Explorer中,如果选择框的值不是由任何选项表示,则它将显示为空白,Firefox将显示第一个选项.
Matt Gardner.. 40
真正得到我的唯一一个:
IE6仍然被大约18%的网络使用 - 这几乎是五分之一 - 并且解决它的问题是耗时,苛刻和令人沮丧的.;)这里的问题实在太多了.
如果你对问题本身感兴趣,QuirksMode.org是我每天用到客户端库之前的一个惊人的资源.另请参阅John Resig的The DOM是雅虎的Mess演示文稿,它提供了很多有关如何有效处理跨浏览器主题的理论.
但是,如果您只是想让它们解决,那么您的问题就是为什么许多人考虑使用jQuery,YahooUI,MooTools,Dojo等客户端库的一个很好的例子.拥有蓬勃发展的社区,才华横溢的人才和企业支持项目像那些让你专注于你的应用程序而不是这些问题.
以下是一些jQuery示例,可以避免大部分跨浏览器的挫败感,并且可以真正实现所有这些......有趣.
跨浏览器鼠标单击绑定
$('#select anything + you[want=using] ~ css:selectors').click(
function(){
alert('hi');
}
);
跨浏览器HTML注入
$('#anElementWithThisId').html('anything you want');
跨浏览器Ajax(所有请求对象 仍可供您使用)
$('p.message').load('/folder/file.html');
真正让我震惊的是,用选择器加载数据子集(详见手册)
$('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 Things Done上有一个关于面试和智能开发人员的细分,完全改变了我的编程方法.
类似于钢琴家可以"播放"音乐因为她知道所有的键,你的进步不是来自做更多需要思考的事情,而是更多不需要思考的事情.然后,目标变得使所有的基础变得容易..自然..潜意识..所以我们都可以瞄准我们更高层次的目标.
从某种程度上说,客户端库可以帮助我们做到这一点.;)
真正得到我的唯一一个:
IE6仍然被大约18%的网络使用 - 这几乎是五分之一 - 并且解决它的问题是耗时,苛刻和令人沮丧的.;)这里的问题实在太多了.
如果你对问题本身感兴趣,QuirksMode.org是我每天用到客户端库之前的一个惊人的资源.另请参阅John Resig的The DOM是雅虎的Mess演示文稿,它提供了很多有关如何有效处理跨浏览器主题的理论.
但是,如果您只是想让它们解决,那么您的问题就是为什么许多人考虑使用jQuery,YahooUI,MooTools,Dojo等客户端库的一个很好的例子.拥有蓬勃发展的社区,才华横溢的人才和企业支持项目像那些让你专注于你的应用程序而不是这些问题.
以下是一些jQuery示例,可以避免大部分跨浏览器的挫败感,并且可以真正实现所有这些......有趣.
跨浏览器鼠标单击绑定
$('#select anything + you[want=using] ~ css:selectors').click(
function(){
alert('hi');
}
);
跨浏览器HTML注入
$('#anElementWithThisId').html('anything you want');
跨浏览器Ajax(所有请求对象 仍可供您使用)
$('p.message').load('/folder/file.html');
真正让我震惊的是,用选择器加载数据子集(详见手册)
$('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 Things Done上有一个关于面试和智能开发人员的细分,完全改变了我的编程方法.
类似于钢琴家可以"播放"音乐因为她知道所有的键,你的进步不是来自做更多需要思考的事情,而是更多不需要思考的事情.然后,目标变得使所有的基础变得容易..自然..潜意识..所以我们都可以瞄准我们更高层次的目标.
从某种程度上说,客户端库可以帮助我们做到这一点.;)
我遇到的大多数问题都是IE,特别是IE6.我亲自处理的问题给人留下了难忘的印象(没有特别的顺序):
必须使用框架来执行基本操作,因为每个浏览器实现DOM的方式略有不同.这对于IE和AJAX来说尤其令人发指,这需要多个if-blocks才能启动呼叫.在一个理想的世界中,我可以在没有框架的情况下使用JavaScript来完成基本的工作.
在IE中选择onChange是错误的,并且在选择失去焦点之前触发(这是不正确的).这意味着由于IE,您永远不能对选择使用onChange,因为仅限键盘的用户将因此实现问题而陷入困境.
你在帖子中提到过它,但是当使用getElementBy Id()时,IE按名称抓取元素是一个巨大的痛苦.
在RTL语言环境(阿拉伯语,希伯来语等)中,Firefox实现"text-align:right;" 不正确.如果容器由于某种原因溢出,则文本对齐于可查看容器的右侧,而不是容器本身的右侧(即使它使其一部分不可见).
对于如何结束数组和对象,不同的浏览器具有不同的挑剔程度.例如,使用类似这样的数组的Firefox就可以了:[item0,item1,]".但是,相同的代码会使Opera barf因为它讨厌尾随的逗号.IE会使数组成为一个三项数组,第三项未定义!这是肯定的错误代码,但是我已经动态生成了javascript,这是一个巨大的重写难题 - 如果这只是有用的话会很好.
一切都与IE的hasLayout有关.可怕的痛苦围绕着这个属性,特别是当我不知道它存在时.通过使用hacks添加hasLayout修复了很多问题.由于黑客攻击造成了更多问题.
IE中的浮动很少像你希望的那样工作.它们在其他浏览器中也常常令人讨厌,但它们至少符合特定的行为.;)
IE 在列表项之间添加了额外的空白区域,这让我感到痛苦,因为YUI使用列表来制作菜单.(要完全掌握问题,您必须在IE和其他浏览器中并排查看该链接.)
我有很多问题让文本不包装在IE中的容器中.其他浏览器听"white-space:nowrap"要好得多.这是我工作的UI的一个问题,它有一个可调整大小的侧边栏; 在IE中,如果您调整太多,侧边栏项目将开始换行.
IE6中缺少许多CSS选择器类型意味着您必须对DOM进行超出必要的分类.例如,缺少+,:hover,:first-child.
不同的浏览器以不同方式处理空文本 具体来说,当使用Opera遍历DOM时,我不得不在浏览节点的子节点时担心空文本节点.如果您正在寻找特定项目,这不是问题,但是如果您正在编写需要特定输入的代码以及浏览器查看该输入的方式不同.
在IE6中,当您通过javascript动态生成iframe时,iframe有时不会自动填充其容器(即使宽度和高度设置为max).我仍然不知道如何解决这个问题,并一直在考虑发布一个关于它的问题.
在IE中,您无法在
元素上设置溢出CSS.这意味着无法以简单的方式制作可滚动表(具有具体的和).
我稍后可能会在此列表中添加更多内容,因为(对我而言)Web开发的最糟糕部分是跨浏览器问题.此外,我怀疑我是否会编辑出"我可能会在以后添加更多内容",因为这些问题是无穷无尽的.:)
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没有内置任务管理器,这意味着您必须软重置设备;
哦,除了文本在
大量的基本JavaScript方法和"DOM Level 0"方法可以追溯到Netscape 2(!).
这是微软2009年旗舰Windows Mobile浏览器的最新版本.
当然,它支持XMLHttpRequest,但是在CSS和脚本支持小于IE3(!)的浏览器上编写AJAX代码是奇怪的精神分裂症,就像你正在使用21世纪和19世纪技术的奇怪混合.
我不推荐它.
这样做太长时间没有多少问题,但它仍然让我疯狂,我必须破解IE不支持CSS的东西,如display:table,:last-child,和:hover在anchors之外.
所有IE的东西仍然是疯了,但现在只是背景疯狂 :)
最大的跨浏览器问题？- Internet Explorer!
IE 全权负责"阻止网络" - 我们的开发人员无法使用HTML5,SVG,XFORMS或CANVAS创建出色的网站...不是因为Firefox,Safari或Chrome,而是因为2/3的互联网仍然停留在IE上.更不用说~20%的网络仍然停留在IE6上!IE8是IE的第一个版本,至少试图与标准兼容(2001年的标准),这意味着它将至少在2018年才能最终开始放弃对IE7的所有支持.
否则命名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)
京公网安备 11010802040832号 | 京ICP备19059560号-6 