有关css和js针对不同浏览器兼容的问题

Posted 2022-06-20 wkyuan

1.HTML对象获取问题

FireFox：document.getElementById("idName");
ie:document.idname或者document.getElementById("idName").

解决办法：统一使用document.getElementById("idName");

2.const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.

解决方法:统一使用var关键字来定义常量.

3.window.event问题

说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.   Firefox必须从源处加入event作参数传递。Ie忽略该参数，用window.event来读取该event。

 

解决方法:  

IE&Firefox:  
Submitted(event)"/>   …
<script   language="javascript">  
function   Submitted(evt)     
evt=evt?evt:(window.event?window.event:null);
  
</script>

 

4.event.srcElement问题

说明:  IE下,event对象有srcElement属性,但是没有target属性;
          Firefox下,even对象有target属性,但是没有srcElement属性.  

解决方法:

使用obj(obj   =   event.srcElement   ?   event.srcElement   :   event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.    

请同时注意event的兼容性问题。

 
5.window.location.href问题

说明:   IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
           Firefox1.5.x下,只能使用window.location.

 
解决方法:使用window.location来代替window.location.href.  

6. innerText在IE中能正常工作，但是innerText在FireFox中却不行.   需用textContent。
解决方法:

if(navigator.appName.indexOf("Explorer")   >   -1)
        document.getElementById(‘element‘).innerText   =   "my   text";
   else
        document.getElementById(‘element‘).textContent   =   "my   text";

 

7.   padding   问题

padding   5px   4px   3px   1px   FireFox无法解释简写,
必须改成   padding-top:5px;   padding-right:4px;   padding-bottom:3px;   padding-left:1px;
 
8.   消除ul、ol等列表的缩进时

样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效