文档章节

最近总结的11条兼容浏览器问题

湖小叶叶
 湖小叶叶
发布于 2014/03/07 22:44
字数 792
阅读 182
收藏 27


 1 padding-top 高度计算方式不同  IE不加高度,Firefox等加高度

     

     解决方案:

         height:345px;  //此行为firefox可识别高度。

         *height:427px   //为IE可识别高度。

 

2 Div text-align:center  在firefox中无效问题

     解决方案:

         使用margin: auto;代替。

 

3 IE和firefox对于停止事件冒泡的处理方式不同

      解决方案:

         function stopPop(obj,evt) {   //停止事件冒泡,兼容IE及firefox

              var e=(evt)?evt:window.event;

              if (window.event) {

                   e.cancelBubble=true;

              } else {

                   e.stopPropagation();

              }

         }

 

     在需要停止冒泡的地方调用:  stopPop(this,event)

 

4 firefox不支持insertAdjacentElement方法

   

     解决方案:

     改写默认insertAdjacentElement方法,传递3个参数

         function insertAdjacentElementSuper(obj,where,parsedNode){  

             switch(where){

                 case "beforeBegin":

                     obj.parentNode.insertBefore(parsedNode,obj);

                     break;

                 case "afterBegin":

                     obj.insertBefore(parsedNode,obj.firstChild);

                     break;

                 case "beforeEnd":                    

                     obj.appendChild(parsedNode);                 

                     break;

                 case "afterEnd":

                     if(obj.nextSibling)

                         obj.parentNode.insertBefore (parsedNode,obj.nextSibling);

                     else

                         obj.parentNode.appendChild (parsedNode);

                     break;

               }

           }

       

      调用方式:insertAdjacentElementSuper(ifraBody,"beforeEnd",ifraDiv);

 

      注意:obj.appendChild(parsedNode);  中 obj和parsedNode对象必须是在同一个窗口对象中创建的,例如obj创建于:

          var ifraBody = top.mainFrm.document.getElementsByTagName_r("body").item(0);

      则parsedNode对象必须创建于:

          var ifraDiv=top.mainFrm.document.createElement("div");

      而不能采用:

          var ifraDiv= document.createElement("div");

 


----------------------

或者重新改写此方法:


/************************************

*重写insertAdjacentElement()方法(因为firefox中没有该方法)

*然后所有浏览器都可以使用此方法了。

*这个扩充可能会影响到原始函数细节。

************************************/

if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){

alert('这是ff,重新定义了函数insertAdjacentElement');

HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode){

switch(where){

case "beforeBegin": 

this.parentNode.insertBefore(parsedNode,this); 

break; 

case "afterBegin": 

this.insertBefore(parsedNode,this.firstChild); 

break; 

case "beforeEnd": 

this.appendChild(parsedNode); 

break; 

case "afterEnd": 

if(this.nextSibling) 

this.parentNode.insertBefore(parsedNode,this.nextSibling); 

else 

this.parentNode.appendChild(parsedNode); 

break; 

}

}

}

/************************************

*重写insertAdjacentElement()方法结束。

************************************/



5 firefox不支持\转义操作

   

    解决方式: 

    将字符转义语句,例如: aMenuHtml+="<table width="100%" height="100%" "; 

    改为:

         aMenuHtml+="<table width= '100%' height='100%' ";

 

 

6 firefox 与IE按键事件响应方式不同的处理

  

解决方式:

function loginSys(e){

       e = e || window.event;

       var code = e.keyCode || e.which;  

       if(code == 13){

         validateSubmit()

       }

调用方法: loginSys(event)



7 IE6 png背景图片无法平铺的问题

 解决方法:

 使用纯色背景png图片拉伸代替图片平铺。

 即 sizingMethod='scale'

 

 例如:

  background: url(../images/skin1/main/mainbg.png) repeat !important;

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled='bEnabled' , sizingMethod='scale' , src='images/skin1/main/mainbg.png' );

*background:none;

 

8 动态生成iframe设置背景及边框无效的问题

解决方法:

动态生成iframe设置的参数在输出为dom对象时会自动改为大写字母。故需要保持大小写。

 

错误方法:

ifraSelf.setAttribute("frameborder", "0");   

ifraSelf.setAttribute('allowtransparency','true');

 

正确方法:加入一个参数可以保持大小写不变

ifraSelf.setAttribute("frameborder", "0", 0);   

ifraSelf.setAttribute('allowtransparency','true',0);

 



9 IE png背景透明层遇overflow后之上链接无效问题

 解决方法:

把内容从png背景透明层中提取出来,再使用绝对定位定位位置。

 

链接无效代码:

<body style="overflow:auto;">

<div class="portalBg">

<span style="position:relative;"><a href="#" >文本文本</a></span>

</div>

</body>

其中class:portalBg包含png透明样式:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled='bEnabled' , sizingMethod='scale' , src='images/skin1/main/bottomBg.png' );

 

正确方法:

<body style="overflow:auto;">

<div class="portalBg"></div>

<span style="position:absolute;left:0; top:0;"><a href="#" >文本文本</a></span>

</body>

 



10        Obj.removeNode()在firefox下不支持

 

解决方法:

将原obj.removeNode()方法改为:

object.parentNode.removeChild(object)


 

 

 

 

11     IE6和IE7 对于margin-left解析数值不同的问题

             

解决方法:

在css中添加display:inline;



----




本文转载自:http://blog.sina.com.cn/s/blog_478b6bff0100cr0f.html

湖小叶叶
粉丝 2
博文 7
码字总数 1858
作品 0
郑州
程序员
私信 提问
让Bootstrap 3兼容IE8浏览器

让Bootstrap 3兼容IE8浏览器 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。 1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文...

次长风
2015/07/31
237
1
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在 chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样...

JackFace
2015/11/13
322
0
分享29本关于div+css的学习书籍(免费下载)

分享29本关于div+css的学习书籍(免费下载) 1、多浏览器兼容分析 2、浏览器兼容 3、CSS参考手册3.4 4、网页设计师 5、网页制作完全手册 6、十天学会DIV+CSS(WEB标准) 7、WEB设计版精华荟萃 ...

邓剑彬
2012/11/30
2.4K
2
jquery slider的总结

1、Owl Carousel Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持...

数学家
2016/06/03
69
0
WPS Office 2019 For Linux 8372 个人版发布

WPS Office 2019 For Linux 新版本11.1.0.8372正式发布(以下简称WPS 2019)。除延续WPS 2016版相同体验外,WPS 2019 界面更灵活、内容更精彩、视图更丰富、系统更兼容。本次更新不仅支持全新...

zb1495501334595
04/02
4.7K
63

没有更多内容

加载失败,请刷新页面

加载更多

Flink Graph生成及Hash生成分析

222

MrPei
23分钟前
1
0
[译]Android Activity 和 Fragment 状态保存与恢复的最佳实践

https://blog.csdn.net/growing_tree/article/details/53759564 https://blog.csdn.net/u013588712/article/details/54691791...

shzwork
24分钟前
1
0
调用第三方快递鸟物流单号查询接口API代码示例

最近进行网站后台开发,需要实现物流的即时查询,发现之前集成的 快递100物流查询 API ——【PHP 快递查询源码资源】 已经不能正常使用了; 为了方便以后的业务需求,经过比较,最后选择使用...

程序的小猿
31分钟前
3
0
java Poi 操作执行excel 文件中函数问题

poi 读取excel 文件,当excel 有函数时,poi直接读取返回的是excel 函数,并不能返回函数计算结果: 解决步骤: sheet.setForceFormulaRecalculation(true); 判断该列格式是否为...

早a
39分钟前
4
0
js模拟实现输入框input事件

直接修改value值是无法触发对应元素的事件的。 通过发送输入框input事件了, 可以触发。 这里简单封装了一个方法. window.inputValue = function (dom, st) { var evt = new InputEvent('i...

開援带碼
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部