Brower compatibility
文章平均质量分 66
魔豆爸
擅长Web开发前端技术,具有多种浏览器下开发经验。精通 JavaScriptAJAX编程熟练使用主流JS库。手写JS能力强,运用无干扰的JS思想进行开发。熟练使用CSS及DHTML,W3C标准的推广和贯彻者。熟悉Java语言,MVC设计模式,StrutsSpring架构
展开
-
仅Firefox中A元素包含Select时点击Select不能选择option
这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下<!DOCTYPE HTML><html><head> <title> 仅Firefox中A元素包含Select时点击Select不能选择option </title></head><body> &2014-09-26 11:03:50 · 144 阅读 · 0 评论 -
IE6/7不支持hashchange事件
如下<!doctype html><html> <head> <meta charset="utf-8"> <title>IE6/7不支持hashchange事件</title> <script type="text/javascript">2011-11-11 13:51:02 · 124 阅读 · 0 评论 -
设置元素浮动的几种方式
们知道获取元素的浮动属性,各浏览器中使用的属性不同。大家都知道IE中使用styleFloat,标准浏览器使用cssFloat。<div>test</div><script> var div = document.getElementsByTagName('div')[0]; // IE div.currentStyle.styleFlo...2011-11-10 11:25:19 · 315 阅读 · 0 评论 -
textarea元素IE6/7/8/9/10中默认有上下滚动条
IE下有上下滚动条。其它浏览器没有。先看一个示例<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8" /> <title>textarea</title> </HEAD> <BODY>2011-11-10 11:19:25 · 100 阅读 · 0 评论 -
各情景下元素宽高的获取
为了叙述简单,这里仅拿width示例。 情景一,元素style属性设置了width/height<div style="width:100px;">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);...2011-11-09 12:20:59 · 94 阅读 · 0 评论 -
元素未显示设置width/height时IE中无法使用currentStyle获取(默认为auto)
我们知道获取元素的实际宽高在IE中可以使用currentStyle属性。但如果没有显示的去设置元素的宽高,那么使用该属性将获取不到,获取的值为auto。如下<div>abcd</div><script> var div = document.getElementsByTagName('div')[0]; alert(div.currentS...2011-11-09 12:13:38 · 304 阅读 · 0 评论 -
各浏览器中使用getAttribute获取checkbox/radio的checked值不同
如下<!DOCTYPE HTML><head> <meta charset="utf-8" /></head><body><input type="checkbox" /><input type="checkbox" checked/&2011-11-08 21:18:54 · 367 阅读 · 0 评论 -
IE6/7不支持setAttribute设置style / 不支持getAttribute获取style属性值
IE6/7中不能通过setAttribute设置元素的style属性,也不能通过getAttribute获取元素的style属性值。它获取的是一个style对象。如下<div style="color:blue">div test</div><script type="text/javascript"> var div1 = docume...2011-11-08 09:39:40 · 179 阅读 · 0 评论 -
给body标签和document.body都添加点击事件后仅Firefox之弹出了两次
这是菜菜刚刚发现的 <!DOCTYPE html><html style="background:red"> <head> <meta charset="utf-8"> <title>给body标签和document.body都添加点击事件后仅Firefox之弹出了两次</title&2011-04-02 16:56:46 · 140 阅读 · 0 评论 -
IE6/7/8/Opera不支持script元素的onerror事件
如下<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>IE6/7/8/Opera不支持script元素的onerror事件</title> <script src="jquery-1.5.23.j2011-08-09 14:16:33 · 79 阅读 · 0 评论 -
各浏览器对click方法的支持差异
click方法可以用来模拟用户点击。有的浏览器中所有元素都具有click方法,有的浏览器则没有。如下IE6/7/8/9/Opera12/Firefox5Safari5/Chrome12INPUT[type=text]INPUT[type=password]INPUT[type=radio]INPUT[type=checkbox]INPUT[type=butt...2011-10-20 21:58:32 · 321 阅读 · 0 评论 -
各浏览器中innerHTML实现差异(1)
如下代码<p id="tit"></p><script> try { document.getElementById('tit').innerHTML = "<div>trtr</div>"; } catch(e) { //IE<9 ERROR2012-05-16 06:59:51 · 104 阅读 · 0 评论 -
各浏览器中innerHTML实现差异(2)
如下代码 <p id="tit"></p><script> var p = document.getElementById('tit'); var div = document.createElement('div'); p.appendChild(div); try { div.inne...原创 2012-05-17 07:40:10 · 85 阅读 · 0 评论 -
IE11的API变化
IE11已经登陆Win8.1,它的API有了很大变更 一、User-agent字符串的更改IE10的是Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0) IE11则是Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like...原创 2014-06-10 15:40:33 · 145 阅读 · 0 评论 -
Button未设type属性时在非IE6/7中具有submit特性
如下<!DOCTYPE html><html> <head> <title>Button在Form中具有submit的特性</title> <meta charset="utf-8"> </head> <body> &l2014-06-04 12:01:19 · 111 阅读 · 0 评论 -
光标从编辑器移入本页面中的其它输入域后,IE中每次只在编辑器首部插入内容...
做编辑器开发时碰到的 重现步骤:1. 将光标点到文本“some text”的末尾(想在“some text”后插入内容) 2. 将光标点到“输入域”的文本框 3. 点击“插入HTML”按钮结果:1. IE6-10中每次都在编辑器最前面插入内容 2. Firefox/Chrome/Safari中每次都在编辑器后面插入内容 原因:...2013-11-25 08:10:54 · 111 阅读 · 0 评论 -
仅IE6/7不支持字符串属性/索引读取
IE6/7不支持字符串属性/索引读取(Property access on strings),其它浏览器则支持。如下alert('abcd'[1])IE6/7是undefined,其它浏览器中会返回'b'。 相关:各浏览器关键字/保留字作为对象属性的差异 ...2013-05-31 14:35:17 · 86 阅读 · 0 评论 -
IE9/Firefox/Safari/Chrome/Opera支持模拟触发自定义DOM事件
自定义DOM事件是在DOM3中定义的,它不是由DOM原生触发。自定义事件只能通过addEventListener方式添加,其它如内联到html或DOM0方式(el.onXXX=fn)添加的不能触发。如<!-- 内联事件代码 --><div id="d1" onmyevent="alert(this)">DIV1</div><script>...2013-05-30 13:57:44 · 124 阅读 · 0 评论 -
xhrhttprequest部分浏览器中不支持put/delete
后端同事想采用REST风格,hailiang在看jQuery文档时发现的$.ajax不是所有浏览器中都支持put/delete。 但没有指出具体是那些浏览器。 我新建了一个Java WEB项目测试所有浏览器,但都支持put和delete。测试浏览器版本如下 Firefox 11Chrome 18Safari 5Opera 11.62IE9 (含ie...原创 2012-04-16 20:59:06 · 793 阅读 · 0 评论 -
仅IE6/7浏览器SPAN元素包含块级元素会使SPAN的背景色显示
这个bug发生在下面的网页,如下: http://yyhygw.blog.sohu.com/204511710.html 用户博客文字在IE下有背景色,其它浏览器没有。 重现代码如下<!DOCTYPE html><html><head><meta charset="utf-8"/></head>...2012-02-23 18:19:22 · 103 阅读 · 0 评论 -
设置iframe为可编辑状态后敲回车在各浏览器中输出的innerHTML不同
测试代码如下 <!doctype html><html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title> <meta charset="utf-8"> </head&2012-02-14 18:57:47 · 174 阅读 · 0 评论 -
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
设置iframe的document.designMode为On可以让其可编辑,一般用在富文本编辑器组件中。这里仅列出各浏览器差异。重现如下: <!doctype html><html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br&l...2012-02-14 14:30:13 · 249 阅读 · 0 评论 -
各浏览器中for in顺序的差异
这个问题在sohu博客中也有:写博客-插入图片图片顺序在Chrome/IE9中却不对。重现如下 var obj = { 2:"2", 40:"40", 15:"15",};for (var k in obj) { console.log(k); }; IE6/7/8/Firefox/Safari24015IE9/Chrome/Opera215...2012-02-06 20:04:30 · 91 阅读 · 0 评论 -
仅Firefox中链接A无法实现模拟点击以触发其默认行为
偶然发现之前写的事件模块在Firefox5中无法触发A的默认行为了。IE/Opera/Firefox5中A具有click方法,因此模拟点击直接调用click方法即可。而标准的事件触发可以使用dispatchEvent方法。但现在FF5无法触发了A的默认行为了。如下 <!doctype html><html> <head> <meta ...2011-10-19 22:19:45 · 101 阅读 · 0 评论 -
Chrome(12+)中获取透明度(opacity)返回字符串不同于其它浏览器
获取计算后的元素样式,IE有currentStyle,而标准浏览器用getComputedStyle。IE9后也支持getComputedStyle了。发现以前写的css方法不好用了,在chrome中返回的结果与其它浏览器不同。如下<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8"...2011-10-18 18:37:02 · 205 阅读 · 0 评论 -
各浏览器中中关键字作为对象属性的差异
最近记录了各种各样的标识符 “同名” 现象,有 Javascript中同名标识符优先级 和 表单中有name为action的元素时,取form的属性action杯具了。最近又碰到一个,后台同事返回了如下的JSON结构:{default:{name:'jack'}}在IE6/7/8中出错了,调试了很久才发现原因。细心的朋友获取已经发现了,default不是JS的关键字吗?...2010-12-06 08:35:21 · 98 阅读 · 0 评论 -
仅IE9/10/(Opera)同时支持script元素的onload和onreadystatechange事件
如下<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>IE9/10同时支持script元素的onload和onreadystatechange事件</title> <script src="http:/2011-08-17 07:11:11 · 89 阅读 · 0 评论 -
各浏览器对link标签onload/onreadystatechange事件支持的差异
1,onload事件<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onload</title> <link type="text/css" rel="2011-08-16 07:01:45 · 314 阅读 · 0 评论 -
各浏览器中对document.getElementById等方法的实现差异
所有的Web前端同仁对 document.getElementById 都非常熟悉了。开发过程中经常需要用其获取页面id为xx的元素,自从元老级js库Prototype流行后,都喜欢这么简写它// 方式1function $(id){ return document.getElementById(id); } 有没有人想过为什么要这么写,而不用下面的方式写呢?/...2010-09-15 08:00:41 · 452 阅读 · 0 评论 -
神奇的css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发。 现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。 如下: <!DOCTYPE html><html>...2010-06-22 16:49:03 · 102 阅读 · 0 评论 -
IE8+中XMLHttpRequest对象timeout属性及ontimeout事件
最近在写一个ajax工具库,参考了JQuery等对请求超时的处理。偶然发现IE8的XMLHttpRequest对象已经增加这方面的支持了。在IE9 pre4测试也支持。如果W3C能将这两个东东标准化多好啊,不用那么的hack方式实现了。见:http://msdn.microsoft.com/en-us/library/ms535874%28VS.85%29.aspxXMLHttp...2010-08-17 11:01:56 · 569 阅读 · 0 评论 -
eval与window.eval的差别
它们之间有区别吗?开发过程中似乎很少有人去加个额外的window,觉得多此一举。比如ajax过程中回调函数解析json格式字符串: ...function callback(str){ var json = eval('(' + str + ')');}... 通常直接使用eval,而非var json = window.eval('(' + str + ')...2010-05-21 09:01:19 · 295 阅读 · 0 评论 -
Firefox中的Node.mozMatchesSelector方法
mozMatchesSelector 如果元素具有指定的选择器字符串,那么该方法返回true。w3c草案中该方法为matchesSelector() 示例如下: <!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="...2010-08-09 13:48:42 · 143 阅读 · 0 评论 -
option元素在各浏览器中的差异
1,IE6/7/8及IE9 pre4中无事件(如click,mouseover),Firefox/Safari/Chrome/Opera则不然 <select id="s1" multiple="multiple"> <option value="1" onclick="alert(1);" onmouseover="alert(1);">12010-08-05 12:57:02 · 112 阅读 · 0 评论 -
解决Firefox下outerHTML不支持问题
代码很简单,如下: var pro = window.HTMLElement.prototype;pro.__defineGetter__("outerHTML", function(){ var str = "<" + this.tagName; var a = this.attributes; for(var i = 0, len = a.length; i &l...原创 2010-07-21 15:43:29 · 148 阅读 · 0 评论 -
各JS引擎对Function.prototype.apply第二个参数的实现差异
每个function都有个apply方法,该方法有两个作用:1,改变function的执行上下文(第一个参数非null,undefined等)2,执行/调用该function (见:http://snandy.iteye.com/blog/420000)apply方法第二个参数一般认为被实现为数组,见经典的《javascript权威指南-第五版》中章节8.6.4,145页一句:...原创 2010-05-06 10:31:55 · 401 阅读 · 0 评论 -
IE6/7/8/Opera不支持script元素的onerror事件
如下<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>IE6/7/8/Opera不支持script元素的onerror事件</title> <script src="jquery-1.5.23.j2011-08-17 10:22:11 · 89 阅读 · 0 评论 -
仅IE不支持setTimeout/setInterval函数的第三个以上参数
setTimeout/setInterval,这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用 setTimeout(function(obj){ alert(obj.a);}, 2000, {a:1}); 即传了第三个参数,第三个参数将作为回调函数的参数obj传入。在非IE浏览器中都弹出了1。这样有个好处,即解决了回调函数的执行上下文,比如...2011-08-18 11:01:12 · 208 阅读 · 0 评论 -
表单中有name为action的元素时,取form的属性action杯具了
示例如下<!DOCTYPE html><html> <head> <title>表单中有name为action的元素时,取form的属性action杯具了</title> <meta http-equiv="Content-Type" content="text/html;charset=gbk&q2010-12-01 11:35:55 · 172 阅读 · 0 评论 -
仅IE6/7/8下cssText返回值少了分号
如下 <!DOCTYPE html><html><head> <title>IE6/7/8下cssText返回值少了分号</title></head><body> <div style="color:red;">TEST<2011-03-11 10:10:26 · 91 阅读 · 0 评论