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

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有效

原文地址:https://www.cnblogs.com/wkyuan/p/11321690.html

时间: 2024-11-08 14:35:37

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

解决修改css或js文件,浏览器缓存更新问题。

在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css.js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量. 问题 现在问题来了,.htaccess设置的css.js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css.js,在这些css.js缓存未过期之前,浏览器只会从缓存

css 渐变颜色背景gradient 浏览器兼容

兼容当前五大浏览器的渐变颜色背景gradient的写法<style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ background: url(gradient.jpg); /* Webkit: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient

【CSS学习笔记】IE浏览器兼容

1.字体大小和字体颜色不能随便设置默认,各浏览器默认字体的大小和自已的颜色可能不同: 2.bug的几种常见原因:没有使用正确的doctype各浏览器对不同标签的初始值不同自身书写不规范引起浏览器bug引起 3.IE常见的bug以及解决方案 (1)盒模型bug-方案:使用严格的doctype声明: (2)双倍margin bug 在IE中,左浮元素,左margin是定义的2倍:右浮元素,右margin是定义的2倍. -方案:_display:inline;必须添加下划线,作用是仅仅只影响IE (3

js bom中浏览器兼容问题判断代码

var btn = document.getElementById('d1');if(addEventListener===undefined){ btn.attachEvent('onclick',function () { alert('版本小于IE8') })}else{ btn.addEventListener('click',function () { alert('其他版本浏览器') },false)}

js之ie浏览器兼容问题

近期遇到ie里js不加载,据查结果是js的function里不可以使用默认值,例如: function(aaa='xxx'){ alert(123); } 这种情况下ie就不会加载运行.

CSS Hack (各个浏览器兼容的问题)

写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针

转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则.实现浏览器兼容主要有两种方式条件样式表和CSS Hacks(Selector Hacks.Attribute Hacks).对此根据一些资料汇总了一些CSS Hacks方法.   1.条件样式表 像这样的代码你应该见过: <link rel="stylesheet

javascript创建css、js,onload触发callback兼容主流浏览器的实现

http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.css后是否触发onload事件做了个测试.当然,为了兼容,首先要考虑的是会用到onload和onreadystatechange,但他们并不是万能的.加载js文件onload触发callback不算大问题.css比较特殊,因为Webkeit/FF下加载css不会触发onload事件.所以研究了一晚上

针对各种浏览器css不兼容的写法

/*针对谷歌浏览器内核支持的CSS样式*/@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 } /*针对IE6特制识别的CSS样式*/*HTML .SearchBox{ 样式 } 针对Firefox浏览器的内核CSS写法:@-moz-document url-prefix() {.font1 {color:red}} IE8就是自己来调试了.调试一个浏览器,有不合适的地方可以在该内核css中重写对应的方法,只需把不合适的样式重写即