浏览器兼容性问题大汇总
Ø JavaScript 3
html 对象获取问题 3
const 问题 3
event.x 与 event.y 问题 3
window.location.href 问题 3
frame 问题 3
模态和非模态窗口问题 3
firefox 与 IE 的父元素 (parentElement) 的区别 3
document.formName.item(itemName) 问题 3
集合类对象问题 3
自定义属性问题 3
input.type 属性问题 3
event.srcElement 问题 3
body 载入问题 3
事件委托方法 3
Table 操作问题 3
对象宽高赋值问题 3
Ø CSS 3
cursor:hand VS cursor:pointer 3
innerText 在 IE 中能正常工作, 但在 FireFox 中却不行. 3
CSS 透明 3
css 中的 width 和 padding 3
FF 和 IE BOX 模型解释不一致导致相差 2px 3
IE5 和 IE6 的 BOX 解释不一致 3
ul 和 ol 列表缩进问题 3
元素水平居中问题 3
Div 的垂直居中问题 3
margin 加倍的问题 3
IE 与宽度和高度的问题 3
页面的最小宽度 3
DIV 浮动 IE 文本产生 3 象素的 bug 3
IE 捉迷藏的问题 3
float 的 div 闭合; 清除浮动; 自适应高度 3
高度不适应 3
IE6 下图片下有空隙产生 3
对齐文本与文本输入框 3
LI 中内容超过长度后以省略号显示 3
为什么 web 标准中 IE 无法设置滚动条颜色了 3
为什么无法定义 1px 左右高度的容器 3
链接 (a 标签) 的边框与背景 3
超链接访问过后 hover 样式就不出现的问题 3
FORM 标签 3
属性选择器(这个不能算是兼容, 是隐藏 css 的一个 bug) 3
为什么 FF 下文本无法撑开容器的高度 3
关于空格的解释
条件注释
强制渲染
js 兼容文件
浏览器识别符
Ø JavaScript
HTML 对象获取问题
FireFox:document.getElementById("idName");
ie:document.idname 或者 document.getElementById("idName").
解决办法: 统一使用 document.getElementById("idName");
const 问题
说明: Firefox 下, 可以使用 const 关键字或 var 关键字来定义常量;
IE 下, 只能使用 var 关键字来定义常量.
解决方法: 统一使用 var 关键字来定义常量.
event.x 与 event.y 问题
说明: IE 下, event 对象有 x,y 属性, 但是没有 pageX,pageY 属性;
Firefox 下, event 对象有 pageX,pageY 属性, 但是没有 x,y 属性.
解决方法: 使用 mX(mX = event.x ? event.x : event.pageX;)来代替 IE 下的 event.x 或者 Firefox 下的 event.pageX.
window.location.href 问题
说明: IE 或者 Firefox2.0.x 下, 可以使用 window.location 或 window.location.href;
Firefox1.5.x 下, 只能使用 window.location.
解决方法: 使用 window.location 来代替 window.location.href.
frame 问题
以下面的 frame 为例:
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问 frame 对象:
IE: 使用 window.frameId 或者 window.frameName 来访问这个 frame 对象. frameId 和 frameName 可以同名
Firefox: 只能使用 window.frameName 来访问这个 frame 对象.
另外, 在 IE 和 Firefox 中都可以使用 window.document.getElementById("frameId")来访问这个 frame 对象.
(2)切换 frame 内容:
在 IE 和 Firefox 中都可以使用 window.document.getElementById("testFrame").src = "xxx.html" 或 window.frameName.location = "xxx.html" 来切换 frame 的内容.
如果需要将 frame 中的参数传回父窗口(注意不是 opener, 而是 parent frame), 可以在 frame 中使用 parent 来访问父窗口例如: parent.document.form1.filename.value="Aqing";
模态和非模态窗口问题
说明: IE 下, 可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口; Firefox 下则不能.
解决方法: 直接使用 window.open(pageURL,name,parameters)方式打开新窗口
如果需要将子窗口中的参数传递回父窗口, 可以在子窗口中使用 window.opener 来访问父窗口.
例如: var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
firefox 与 IE 的父元素 (parentElement) 的区别
- IE:obj.parentElement
- firefox:obj.parentNode
解决方法: 因为 firefox 与 IE 都支持 DOM, 因此使用 obj.parentNode 是不错选择.
document.formName.item(itemName) 问题
问题说明: IE 下, 可以使用 document.formName.item(itemName) 或 document.formName.elements ["elementName"];Firefox 下, 只能使用 document.formName.elements["elementName"]
解决方法: 统一使用 document.formName.elements["elementName"]
集合类对象问题
问题说明: IE 下, 可以使用 () 或 [] 获取集合类对象; Firefox 下, 只能使用 [ ]获取集合类对象
解决方法: 统一使用 [] 获取集合类对象
自定义属性问题
问题说明: IE 下, 可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute() 获取自定义属性; Firefox 下, 只能使用 getAttribute() 获取自定义属性
解决方法: 统一通过 getAttribute() 获取自定义属性
input.type 属性问题
问题说明: IE 下 input.type 属性为只读; 但是 Firefox 下 input.type 属性为读写
解决办法: 不修改 input.type 属性如果必须要修改, 可以先隐藏原来的 input, 然后在同样的位置再插入一个新的 input 元素
event.srcElement 问题
问题说明: IE 下, even 对象有 srcElement 属性, 但是没有 target 属性; Firefox 下, even 对象有 target 属性, 但是没有 srcElement 属性
解决方法: 使用 srcObj = event.srcElement ?event.srcElement : event.target;
如果考虑第 8 条问题, 就改用 myEvent 代替 event 即可
body 载入问题
问题说明: Firefox 的 body 对象在 body 标签没有被浏览器完全读入之前就存在; 而 IE 的 body 对象则必须在 body 标签被浏览器完全读入之后才存在
[注] 这个问题尚未实际验证, 待验证后再来修改
[注] 经验证, IE6Opera9 以及 FireFox2 中不存在上述问题, 单纯的 JS 脚本可以访问在脚本之前已经载入的所有对象和元素, 即使这个元素还没有载入完成
事件委托方法
问题说明: IE 下, 使用 document.body.onload = inject; 其中 function inject()在这之前已被实现; 在 Firefox 下, 使用 document.body.onload = inject();
解决方法: 统一使用 document.body.onload=new Function(inject()); 或者 document.body.onload = function(){/ 这里是代码 /}
[注意] Function 和 function 的区别
Table 操作问题
问题说明: iefirefox 以及其它浏览器对于 table 标签的操作都各不相同, 在 ie 中不允许对 table 和 tr 的 innerHTML 赋值, 使用 js 增加一个 tr 时, 使用 appendChild 方法也不管用
解决方法:// 向 table 追加一个空行:
var row = otable.insertRow(-1);var cell = document.createElement("td");cell.innerHTML = "";cell.className ="XXXX";row.appendChild(cell);[注] 由于俺很少使用 JS 直接操作表格, 这个问题没有遇见过建议使用 JS 框架集来操作 table, 如 JQuery
对象宽高赋值问题
问题说明: FireFox 中类似 obj.style.height = imgObj.height 的语句无效
Ø CSS
cursor:hand VS cursor:pointer
firefox 不支持 hand, 但 ie 支持 pointer
解决方法: 统一使用 pointer
innerText 在 IE 中能正常工作, 但在 FireFox 中却不行.
需用 textContent
解决方法:
- if(navigator.appName.indexOf("Explorer")> -1){
- document.getElementById('element').innerText = "my text";
- } else{
- document.getElementById('element').textContent = "my text";
- }
CSS 透明
- IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
- FF:opacity:0.6
opacity 透明, 子元素会继承透明属性解决方式: 1 使用 background:rgba(0,0,0,.6) //IE8 及以下无效果 2 使用定位, 背景色与子元素处于同级关系
css 中的 width 和 padding
在 IE7 和 FF 中 width 宽度不包括 padding, 在 Ie6 中包括 padding.
FF 和 IEBOX 模型解释不一致导致相差 2px
box.style{width:100;border 1px;}
ie 理解为 box.width = 100
ff 理解为 box.width = 100 + 1*2 = 102 // 加上边框 2px
解决方法: div{margin:30px!important;margin:28px;}
注意这两个 margin 的顺序一定不能写反, IE 不能识别! important 这个属性, 但别的浏览器可以识别所以在 IE 下其实解释成这样: div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行, 所以不可以只写 margin:XXpx!important;
IE5 和 IE6 的 BOX 解释不一致
IE5 下 div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为 300px-10px(右填充)-10px(左填充), 最终 div 的宽度为 280px, 而在 IE6 和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px 来计算的这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
ul 和 ol 列表缩进问题
消除 ulol 等列表的缩进时, 样式应写成: list-style:none;margin:0px;padding:0px;
经验证, 在 IE 中, 设置 margin:0px 可以去除列表的上下左右缩进空白以及列表编号或圆点, 设置 padding 对样式没有影响; 在 Firefox 中, 设置 margin:0px 仅仅可以去除上下的空白, 设置 padding:0px 后仅仅可以去掉左右缩进, 还必须设置 list- style:none 才能去除列表编号或圆点也就是说, 在 IE 中仅仅设置 margin:0px 即可达到最终效果, 而在 Firefox 中必须同时设置 margin:0px padding:0px 以及 list-style:none 三项才能达到最终效果
元素水平居中问题
FF: margin:0 auto;
IE: 父级{ text-align:center; }
Div 的垂直居中问题
vertical-align:middle; 将行距增加到和整个 DIV 一样高: line-height:200px; 然后插入文字, 就垂直居中了缺点是要控制内容不要换行
margin 加倍的问题
设置为 float 的 div 在 ie 下设置的 margin 会加倍这是一个 ie6 都存在的 bug 解决方案是在这个 div 里面加上 display:inline;
例如:
<div id=imfloat>
相应的 css 为
- imfloat{
- float:left;
margin:5px;/IE 下理解为 10px/
display:inline;/IE 下再理解为 5px/}
IE 与宽度和高度的问题
IE 不认得 min - 这个定义, 但实际上它把正常的 width 和 height 当作有 min 的情况来使这样问题就大了, 如果只用宽度和高度, 正常的浏览器里这两个值就不会变, 如果只用 min-width 和 min-height 的话, IE 下面根本等于没有设置宽度和高度
比如要设置背景图片, 这个宽度是比较重要的要解决这个问题, 可以这样:
box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
页面的最小宽度
如上一个问题, IE 不识别 min, 要实现最小宽度, 可用下面的方法:
container{ min-width: 600px; width:expression(document.body.clientWidth< 600? "600px": "auto" );}
第一个 min-width 是正常的; 但第 2 行的 width 使用了 Javascript, 这只有 IE 才认得, 这也会让你的 HTML 文档不太正规它实际上通过 Javascript 的判断来实现最小宽度
DIV 浮动 IE 文本产生 3 象素的 bug
左边对象浮动, 右边采用外补丁的左边距来定位, 右边对象内的文本会离左边有 3px 的间距.
- box{ float:left; width:800px;}
- left{ float:left; width:50%;}
- right{ width:50%;}
- *html #left{ margin-right:-3px; // 这句是关键}
- <div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
IE 捉迷藏的问题
当 div 应用复杂的时候每个栏中又有一些链接, DIV 等这个时候容易发生捉迷藏的问题
有些内容显示不出来, 当鼠标选择这个区域是发现内容确实在页面
解决办法: 对 #layout 使用 line-height 属性或者给 #layout 使用固定高和宽页面结构尽量简单
float 的 div 闭合; 清除浮动; 自适应高度
例如:<div id=floatA><div id=floatB><div id=NOTfloatC>
这里的 NOTfloatC 并不希望继续平移, 而是希望往下排(其中 floatAfloatB 的属性已经设置为 float:left;)
这段代码在 IE 中毫无问题, 问题出在 FF 原因是 NOTfloatC 并非 float 标签, 必须将 float 标签闭合在<div class=floatB><div class=NOTfloatC > 之间加上<div class=clear > 这个 div 一定要注意位置, 而且必须与两个具有 float 属性的 div 同级, 之间不能存在嵌套关系, 否则会产生异常并且将 clear 这种样式定义为为如下即可:.clear{clear:both;}
作为外部 wrapper 的 div 不要定死高度, 为了让高度能自适应, 要在 wrapper 里面加上 overflow:hidden; 当包含 float 的 box 的时候, 高度自适应在 IE 下无效, 这时候应该触发 IE 的 layout 私有属性 (万恶的 IE 啊!) 用 zoom:1; 可以做到, 这样就达到了兼容
例如某一个 wrapper 如下定义:
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}
对于排版, 我们用得最多的 css 描述可能就是 float:left. 有的时候我们需要在 n 栏的 float div 后面做一个统一的背景, 譬如:
<div id=page>
<div id=left></div>
<div id=center></div>
<div id=right></div>
</div>
比如我们要将 page 的背景设置成蓝色, 以达到所有三栏的背景颜色是蓝色的目的, 但是我们会发现随着 left center right 的向下拉长, 而 page 居然保存高度不变, 问题来了, 原因在于 page 不是 float 属性, 而我们的 page 由于要居中, 不能设置成 float, 所以我们应该这样解决:
- <div id=page>
- <div id=bg style=float:left;width:100%>
<div id=left></div>
<div id=center></div>
<div id=right></div>
</div>
</div>
再嵌入一个 float left 而宽度是 100% 的 DIV 解决之
或者另一种方法: 用选择器 (:after) 在 page 之后插入一个空标签, 并清除浮动
.page:after { content: ""; display: table; clear: both; }
万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup], 将以下代码加入 Global CSS 中, 给需要闭合的 div 加上 class="clearfix" 即可, 屡试不爽
- / Clear Fix /
- .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
- .clearfix { display:inline-block; }
- / Hide from IE Mac /
- .clearfix {display:block;}
- / End hide from IE Mac $ end of clearfix /
或者这样设置:.hackbox{ display:table; // 将对象作为块元素级的表格显示}
高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节, 特别是当内层对象使用 margin 或 padding 时
例:
- box {background-color:#eee; }
- box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
- <div id="box">
<p>p 对象中的内容</p>
</div>
解决技巧: 在 P 对象上下各加 2 个空的 div 对象 CSS 代码 {height:0px;overflow:hidden;} 或者为 DIV 加上 border 属性
IE6 下图片下有空隙产生
解决这个 BUG 的技巧有很多, 可以是改变 html 的排版, 或者设置 img 为 display:block 或者设置 vertical-align 属性为 vertical-align:top/bottom/middle/text-bottom 都可以解决.
对齐文本与文本输入框
加上 vertical-align:middle;
- <style type="text/css">
- <!--
- input {
- width:200px;
- height:30px;
- border:1px solid red;
- vertical-align:middle;
- }
- -->
- </style>
经验证, 在 IE 下任一版本都不适用, 而 ffoperasafarichrome 均 OK!
LI 中内容超过长度后以省略号显示
此技巧适用与 IEOperasafarichrom 浏览器, FF 暂不支持
- <style type="text/css">
- <!--
- li {
- width:200px;
- white-space:nowrap;
- text-overflow:ellipsis;
- -o-text-overflow:ellipsis;
- overflow: hidden;
- }
- -->
- </style>
为什么 web 标准中 IE 无法设置滚动条颜色了
解决办法是将 body 换成 html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%22%3E;
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <style type="text/css">
- <!--
- html {
- scrollbar-face-color:#f6f6f6;
- scrollbar-highlight-color:#fff;
- scrollbar-shadow-color:#eeeeee;
- scrollbar-3dlight-color:#eeeeee;
- scrollbar-arrow-color:#000;
- scrollbar-track-color:#fff;
- scrollbar-darkshadow-color:#fff;
- }
- -->
</style>
为什么无法定义 1px 左右高度的容器
IE6 下这个问题是因为默认的行高造成的, 解决的技巧也有很多:
例如: overflow:hidden zoom:0.08 line-height:1px
16. 怎么样才能让层显示在 FLASH 之上呢
解决的办法是给 FLASH 设置透明
<param name="wmode" value="transparent" />
链接 (a 标签) 的边框与背景
a 链接加边框和背景色, 需设置 display: block, 同时设置 float: left 保证不换行参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
超链接访问过后 hover 样式就不出现的问题
被点击访问过的超链接样式不在具有 hover 和 active 了, 很多人应该都遇到过这个问题, 解决技巧是改变 CSS 属性的排列顺序: L-V-H-A
- Code:
- <style type="text/css">
- <!--
- a:link {}
- a:visited {}
- a:hover {}
- a:active {}
- -->
- </style>
FORM 标签
这个标签在 IE 中, 将会自动 margin 一些边距, 而在 FF 中 margin 则是 0, 因此, 如果想显示一致, 所以最好在 css 中指定 margin 和 padding, 针对上面两个问题, 我的 css 中一般首先都使用这样的样式 ul,form{margin:0;padding:0;}
属性选择器(这个不能算是兼容, 是隐藏 css 的一个 bug)
p[id]{}div[id]{}
这个对于 IE6.0 和 IE6.0 以下的版本都隐藏, FF 和 OPera 作用. 属性选择器和子选择器还是有区别的, 子选择器的范围从形式来说缩小了, 属性选择器的范围比较大, 如 p[id]中, 所有 p 标签中有 id 的都是同样式的.
为什么 FF 下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象 IE6 里那样被撑开的, 那我又想固定高度, 又想能被撑开需要怎样设置呢? 办法就是去掉 height 设置 min-height:200px; 这里为了照顾不认识 min-height 的 IE6 可以这样定义:
- {
- height:auto!important;
- height:200px;
- min-height:200px;
- }
IE 和 FireFox 对空格的尺寸解释不同, FireFox 为 4px,IE 为 8px; FireFox 对 div 与 div 之间的空格是忽略的, 但是 IE 是处理的因此在两个相邻 div 之间不要有空格跟回车, 否则可能造成不同浏览间之间格式不正确, 比如著名的 3px 偏差 (多个 img 标签连着, 然后定义 float: left; 结果在 firefox 里面正常, 而 IE 里面显示的每个 img 都相隔了 3px 我把标签之间的空格都删除都没有作用解决方法是在 img 外面套 li, 并且对 li 定义 margin: 0; 避免方式: 在必要的时候不要无视 list 标签) 而且原因难以查明
条件注释
- <link rel="stylesheet" type="text/css" href="css.css" />
- <!--[if IE 7]>
- <link rel="stylesheet" type="text/css" href="ie7.css" />
- <![endif]-->
- <!--[if lte IE 6]>
- <link rel="stylesheet" type="text/css" href="ie.css" />
- <![endif]-->
lte -- 小于等于
lt -- 小于
gte -- 大于等于
gt -- 大于
! -- 不等于
45. 强制渲染
- <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> // 这句话的意思是强制使用 IE7 模式来解析网页代码!
- <meta http-equiv=X-UA-Compatible content=IE=8>
- <meta http-equiv=X-UA-Compatible content=chrome=1 /> //Google Chrome Frame 也可以让 IE 用上 Chrome 的引擎
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7><! IE7 mode> 或者 <meta http-equiv=X-UA-Compatible content=IE=7><! IE7 mode> // 强制 IE8 使用 IE7 模式来解析
- <meta http-equiv=X-UA-Compatible content=IE=6><! IE6 mode> <meta http-equiv=X-UA-Compatible content=IE=5><! IE5 mode> // 强制 IE8 使用 IE6 或 IE5 模式来解析
- <meta http-equiv=X-UA-Compatible content=IE=5; IE=8 /> // 一个特定版本的 IE 支持所要求的兼容性模式多于一种
46.js 兼容文件
使 IE5,IE6 兼容到 IE7 模式(推荐)
- <![if lt IE 7]>
- <script src=http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js type=text/javascript></script>
- <![endif]>
使 IE5,IE6,IE7 兼容到 IE8 模式
- <![if lt IE 8]>
- <script src=http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js type=text/javascript></script>
- <![endif]>
使 IE5,IE6,IE7,IE8 兼容到 IE9 模式
- <![if lt IE 9]>
- <script src=http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js></script> http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js%E2%80%9D%3E%3C/script%3E;
- <![endif]>
浏览器识别符
p{ _color:red; } IE6 专用
html p{ color:#red; } IE6 专用
p{ +color:red; } IE6,7 专用
p{ color:red; } IE6,7 专用
html p{ color:red; } IE6,7 专用
p{+color: red;} IE7 专用
Body> p{ color: red; } 屏蔽 IE6
- p{ color:red\9; } IE8
- Firefox: -moz-
- Safari: -webkit-
- Opera: -o-
- IE: -ms-
更多请查看: http://www.jq-school.com/
来源: http://www.qdfuns.com/article/18090/961a36d50f2efa676061b5a02c374f75.html