浏览器兼容性问题 1

浏览器兼容性问题 1 并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了.汗。大家一起慢慢完善吧。javascript部分 1.document.form.item问题问题:代码中存在 document.formName.item("itemName")这样的语句，不能在FF下运行解决方法:改用document.formName.elements["elementName"]2.集合类对象问题问题:代码中许多集合类对象取用时使用()，IE能接受，FF不能解决方法:改用作为下标运算，例:document.getElementsByName("inputName")(1)改为document.getElementsByName("inputName")[1]3.window.event问题:使用window.event无法在FF上运行解决方法:FF的event只能在事件发生的现场使用，此问题暂无法解决。可以把event传到函数里变通解决: onMouseMove="functionName(event)"function functionName(e){e=e||window.event;.}4.HTML对象的id作为对象名的问题问题:在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用，在FF中不能解决方法:使用对象变量时全部用 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 的 getElementById("idName")5.用idName字符串取得对象的问题问题:在IE中，利用eval("idName")可以取得id为idName的HTML对象，在FF中不能解决方法:用getElementById("idName")代替eval("idName")6.变量名与某HTML对象id相同的问题问题:在FF中，因为对象id不作为HTML对象的名称，所以可以使用与HTML对象id相同的变量名，IE中不能解决方法:在声明变量时，一律加上var，以避免歧义，这样在IE中亦可正常运行最好不要取与HTML对象id相同的变量名，以减少错误7.event.x与event.y问题问题:在IE中，event对象有x,y属性，FF中没有解决方法:在FF中，与event.x等效的是event.pageX，但event.pageX IE中没有故采用event.clientX代替event.x，在IE中也有这个变量event.clientX与event.pageX有微妙的差别，就是滚动条要完全一样，可以这样:mX=event.x?event.x:event.pageX;然后用mX代替event.x 8.关于frame问题:在IE中可以用window.testFrame取得该frame，FF中不行解决方法: window.top.document.getElementById("testFrame").src='xx.htm'window.to p.frameName.location='xx.htm'9.取得元素的属性在FF中，自己定义的属性必须getAttribute()取得10.在FF中没有parentElement， parement.children而用parentNode，parentNode.childNodes问题:childNodes的下标的含义在IE和FF中不同，FF的childNodes中会插入空白文本节点解决方法:可以通过node.getElementsByTagName()来回避这个问题问题:当html中节点缺失时，IE和FF对parentNode的解释不同，例如:form table input//table/form FF中input.parentNode的值为form，而IE中input.parentNode的值为空节点问题:FF中节点自己没有removeNode方法解决方法:必须使用如下方法node.parentNode.removeChild(node)11.const 问题问题:在IE中不能使用const关键字解决方法:以var代替12.body对象FF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题解决方法:一切在body上插入节点的动作，全部在onload后进行13.url encoding问题:一般FF无法识别js中的&解决方法:在js中如果书写url就直接写&不要写&14.nodeName和tagName问题问题:在FF中，所有节点均有nodeName值，但textNode没有tagNam e值，在IE中，nodeName的使用有问题解决方法:使用tagName，但应检测其是否为空15.元素属性IE下input.type属性为只读，但是FF下可以修改 16.document.getElementsByName()和document.all[name]的问题问题:在IE中，getElementsByName()、document.all[name]均不能用来取得div元素是否还有其它不能取的元素还不知道(这个问题还有争议，还在研究中)17.调用子框架或者其它框架中的元素的问题在IE中，可以用如下方法来取得子元素中的值document.getElementById("frameName").(document.)elementName window.frames["frameName"].elementName在FF中则需要改成如下形式来执行，与IE兼容: window.frames["frameName"].contentWindow.document.elementName window.frames["frameName"].document.elementName 18.对象宽高赋值问题问题:FireFox中类似obj.style.height=imgObj.height的语句无效解决方法:统一使用obj.style.height=imgObj.height+"px";19.innerText的问题问题:innerText在IE中能正常工作，但是innerText在FireFox中却不行解决方法:在非IE浏览器中使用textContent代替innerText 20.event.srcElement和event.toElement问题问题:IE下，even对象有srcElement属性，但是没有 target属性;Firefox下，even对象有target属性，但是没有srcElement属性解决方法:var source=e.target||e.srcElement;var target=e.relatedTarget||e.toElement;21.禁止选取网页内容问题:FF需要用CSS禁止，IE用JS禁止解决方法:IE: obj.onselectstart=function(){return false;}FF:-moz-user-select:none;22.捕获事件问题:FF没有setCapture()、releaseCapture()方法解决方法:IE:obj.setCapture();obj.releaseCapture();FF: window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);if(～window.captureEvents){o.setCapture();}else{window.captureEvents(Even t.MOUSEMOVE|Event.MOUSEUP);}if(～ }else{window.releaseEvents(window.captureEvents){o.releaseCapture(); Event.MOUSEMOVE|Event.MOUSEUP);}CSS部分div类1.居中问题div里的内容，IE默认为居中，而FF默认为左对齐可以尝试增加代码margin:auto 2.高度问题两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象;但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是:.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}3.clear:both;不想受到float浮动的，就在div中写入clear:both;4.IE浮动margin产生的双倍距离#box{float:left;width:100px;margin:0 00 100px;//这种情况之下IE会产生200px的距离display:inline;//使浮动忽略}5.padding问题FF设置padding后，div会增加height和width，但IE不会(*标准的XHTML1.0定义dtd好像一致了)高度控制恰当，或尝试使用height:100%;宽度减少使用padding但根据实际经验，一般FF和IE的padding不会有太大区别，div的实际宽=width+padding，所以div写全width和padding，width用实际想要的宽减去padding定义6.div嵌套时y轴上padding和marign的问题FF里y轴上子div到父div的距离为父padding+子marign IE里y轴上子div到父div的距离为父padding和子marign里大的一个FF里y轴上父padding=0且border=0时，子div到父 div的距离为0，子marign作用到父div外面7.padding，marign，height，width的傻瓜式解决技巧注意是技巧，不是方法:写好标准头～DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""html xmlns="高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding列 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 类1.ul标签在FF中默认是有padding值的，而在IE中只有margin有值先定义ul{margin:0;padding:0;}2.ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成:{list-style:none;margin:0px;padding:0px;}显示类1.display:block,inline两个元素display:block;//可以为内嵌元素模拟为块元素display:inline;//实现同一行排列的的效果display:table;//for FF,模 :block块元素，元素的特点是:总是在新行上开始;拟table的效果display 高度，行高以及顶和底边距都可控制;宽度缺省是它的容器的100%，除非设定一个宽度div，p，h1，form，ul和li是块元素的例子display:inline就是将元素显示为行内元素，元素的特点是:和其他元素都在一行上;高，行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度，不可改变。span，a，label，input，img，strong和em是inline元素的例子2.鼠标手指状显示全部用标准的写法cursor:pointer;背景、图片类1.background显示问题全部注意补齐width，height属性2.背景透明问题IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);IE:filter:alpha(opacity=10);FF:opacity:0.6;FF:-moz-opacity:0.10;