浏览器兼容性问题

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中不能
   解决方法：
   使用对象变量时全部用标准的 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.top.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 的解释不同，例如：

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 没有 tagName 值，在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(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    if (!window.captureEvents) {
    o.releaseCapture();
    }else {
    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }

css常见兼容问题：
CSS常见的浏览器兼容汇总

一、从浏览器内核的角度 来看，浏览器兼容性问题可分为以下三类：

1.渲染相关：和样式相关的问题，即体现在布局效果上的问题。
2.脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。
3.其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。
二、浏览器兼容性相关问题及其解决思路

1、目前，各主流浏览器的新版本，对于 W3C 的标准支持很好，因此，首先保证代码符合 W3C 的标准，这是解决浏览器兼容问题的前提。
其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。

2、不同浏览器默认的内外边距不同的问题
解决：*{margin:0;padding:0;}

3、不同浏览器水平居中的问题：ie6-7文本居中，嵌套的块元素也会居中 ，ff /opera /safari /ie8文本会居中，嵌套块不会居中.
解决: 块元素设置 margin-left:auto;margin-right:auto 或margin:0 auto; 或外层嵌套div设置

浮动块元素的居中：

4、不同浏览器垂直居中的问题 ： 在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置 vertical-align:middle，但是文本框的内容不会垂直居中
解决： 给容器设置一个与其高度相同的行高 line-height:与容器的height一样

5、不同浏览器关于高度问题 ： 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 如果设定了高度，内容过 多时，ie6下会自动增加高度、其他浏览器会超出边框
解决： 1.设置overflow:hidden; 2.高度自增height:auto!important;height:100px;

6、IE6 默认的div高度问题： ie6默认div高度为一个字体显示的高度，在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度
解决：为这个容器设置下列属性之一 1、设置overflow:hidden; 2、设置line-height:1px; 3、设置zoom:0.08

7、IE6 最小高度(宽度)的问题： ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
解决： 使用ie6不支持但其余浏览器支持的属性!important。 设置属性min-height:200px; height:auto !important; height:200px;

8、td高度的问题 ： table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
解决： 设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

9、div嵌套p时，出现空白行问题：div中显示

文本

，firefox、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。
解决：设置p的margin:0px，再设置div的padding-top和padding-bottom
10、IE6-7图片下面有空隙的问题：块元素中含有图片时，ie6-7中会出现图片下有空隙
解决：1、在源代码中让和在同一行
2、将图片转换为块级对象display:block;
3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom
4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置：overflow:hidden;
5、设置图片的浮动属性 float:left;

11、IE6双倍边距的问题 ： ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题 例:float:left;width:100px;margin:0 100px;
解决： 设置display:inline;

12、IE6两个层之间3px的问题： 左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距
解决： 1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px;

13、IE6 子元素绝对定位的问题： 父级元素使用padding后，子元素使用绝对定位，不能精确定位
解决： 在子元素中设置 _left:-20px; _top:-1px;

14、显示手型cursor:hand 问题： ie6/7/8、opera 都支持 ，但是safari 、 firefox 不支持
解决： 写成 cursor:pointer; (所有浏览器都能识别)

15、IE6-7 line-height失效的问题： 在ie中img与文字放一起时， line-height不起作用
解决：都设置成float

16、td自动换行的问题 ： Table宽度固定，td自动换行
解决： 设置Table的table-layout:fixed，td的word-wrap:break-word

17、子容器浮动后，父容器扩展问题： 子容器都float以后，父容器没有设定高度,父容器将不会扩展

<div style="border:1px solid #333;width:204px"> 
   <div style="width:100px;border:1px solid #333; float:left; ">子容器a</div> 
   <div style="width:100px;border:1px solid #333; float:left;">子容器b</div> 
   <div style="clear:both"></div>
</div>

18、透明png图片会带背景色问题： 在ie6下透明的png图片会带一个背景色
解决：

background-image: url(icon_home.png);/* 其他浏览器 */ 
background-repeat: no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */ 
_background-image: none; /* IE6 */ 
19、list-style-position默认值的问题： ie下list-style-position默认为inside, firefox默认为outside

解决： css中指定为outside即可解决兼容性问题

20、 list-style-image准确定位的问题： li前设置图片时，图片与其后的文字对齐问题
解决：1、采用背景定位 和 字符缩进的方法 background:url() no-repeat left center; text-index:16px;
2、采用相对定位方法 li 设置list-style:url(); li的子元素position:relative;top:-5px;

21、ul标签默认值的问题 ： ul标签在ff中默认是有padding值的,而在ie中只有margin有值
解决： 定义ul {margin:0;padding:0;}就能解决大部分问题

22、IE中li指定高度后，出现排版错误 问题： 在ie下如果为li指定高度可能会出现排版错位
解决： 设置line-height

23、ul或li浮动后，显示在div外 问题： div中的ul或li设置float以后，都不在div中
解决： 必须在ul标签后加

来闭合外层div

24、ul或者li浮动后，margin变大 问题： ul设置 float后，在ie中margin将变大
解决： 设置ul的display:inline，li的list-style-position:outside；li浮动问题设置li的display:inline

25、嵌套使用ul、li的问题： ie的bug，嵌套使用ul、li时，里层的li设置float以后，外层li不设置float, 里面的ul顶部和它外面的li总是有一段间距
解决： 设置里面的ul的zoom:1

26、 IE6-7 li底部有3px的问题 ：这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。
解决：
1、div设置clear:left|both，这时li不能设置width、height、zoom。
2、li设置float:left，这时li可以设置width、height、zoom。
3、li设置clear:left|both，这时li不能设置width、height、zoom。
4、IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。

27、IE6 垂直列表间隙的问题： li中有a且设置display:block时，ie6中列表间会出现空隙
解决： 1、li中加display:inline; 2、li使用float 然后 clear:both; 3、给包含的文本末尾添加一个空格 4、设置width

28、IE6 列表背景颜色失效的问题 ： 当父元素设置position:relative;时，在ie6中第一个ul、ol、dl的背景颜色失效
解决： ul、ol、dl 都设置为position:relative;

29、IE6-7 列表背景颜色失效的问题2 ： 做横向导航栏时，ul设置为float且有背景色，li设置为float。ie6-7背景颜色失效
解决： 很多ie的bug都可以通过触发layout来解决 ul添加属性 1、height:1%; 2、float:left; 3、zoom:1;

30、列表不能换行的问题 ： li设置为浮动，后面的li紧随其后，不能换行
解决： 1、为这个ul定义合适的宽高 2、给包含这个ul 的父div定义合适的宽高。

31、超链接访问过后hover样式不出现的问题 ： 击超链接后，hover、active样式没有效果
解决： 改变CSS属性的排列顺序: L-V-H-A

32、 禁用中文输入法的问题 ： 不能在输入框中输入汉字
解决： 只在ie系列 和ff中有效 ime-mode:disabled (但可以粘贴) 禁用粘贴： οnpaste=“return false”

33、除去滚动条的问题 ： 隐藏滚动条
解决： 1、只有ie6-7支持
2、除ie6-7不支持body {overflow:hidden}
3、所有浏览器 html {overflow:hidden}

34、让层显示在FLASH之上：
解决：把FLASH设置透明 1、
2、

35、去除链接虚线边框的问题 ： 当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框
解决： ie6/7中 设置为a { blr:expression(this.onFocus=this.blur()) } ie8 和 ff 都不支持expression 在ie8 、ff中设置为:focus { outline: none; }

36、css滤镜的问题 ： css滤镜只在ie中有效，Firefox, Safari(WebKit), Opera只能够设置透明，它们不支持滤镜filter，无法实现图片切换中间变换的效果，只能通过透明度来 设置。
解决： ff中设置透明度 -moz-opacity:0.10; opacity:0.6; ie中只设置filter:alpha(opacity=50);时，ie6-7失效，还要设置 1、zoom:1; 2、width:100%;

37、IE6背景闪烁的问题：链接、按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。原因是:IE6没有将背景图缓存，每次触发hover的时候都会重新加载
解决：用JavaScript设置ie6缓存这些图片： document.execCommand("BackgroundImageCache ",false,true);

38、ff、chrome绝对定位无效 问题： 在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和Chrome下却不可以。
解决：设置td的display:block。

39、IE6 绝对定位的问题 问题：

<div style="position:relative;border:1px solid orange;text-align:center;"> 
	<div style="position:absolute;top:0;left:0; background:#CCC;">dovapour</div> 
	<a href="#" title="vapour的blog">内容</a> 
</div>

解决：
left的定位错误问题
1、给父层设置zoom:1触发layout。 2、给父层设置宽度width
bottom的定位错误问题
1、给父层设置zoom:1触发layout。 2、给父层设置高度height

40、float的div闭合的问题：
例如：

<div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)
这段代码在IE中毫无问题，问题出在其他浏览器中。原因是NOTfloatC并非float标签，必须将float标签 闭合。
解决：
在

之间加上

这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会 产生异常。并且将clear这种样式定义为为如下即可：.clear{ clear:both;}

41、选框、复选框与后面的文字对不齐 问题：
解决：
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left; padding-top:3px; padding-bottom:5px;}
不足之处：设置padding后高度和宽带都会增加

42、边框重叠说明 说明：
为 table、td 都指定了边框后，然后使用border-collapse:collapse让边框重叠，可以看出在发生重叠时，Firefox 是用 td 覆盖 table 的，而 IE 是用 table 覆盖 td 的。使用时候需要注意。

43、设置td padding的说明：
设置td的padding以后高度和宽带都会增加,padding-left和padding-right的效果都一样增加了td的宽带，但是padding-top和padding-bottom的效果不一样。最好不要使用td的ding-top和padding-bottom

44、使一个层垂直居中于浏览器中 说明：
使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二

div {  
  position:absolute; 
  top:50%; 
  lef:50%; 
  margin:-100px 0 0 -100px;  
  width:200px; 
  height:200px; 
  border:1px solid red;  
}

45、行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug，IE6里的间距比超过设置的间距
解决：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

46、float的div闭合;清除浮动;自适应高度;

① 例如：div id=”floatA” >

<div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在

之间加上

这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性，用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义：.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决

再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!),将以下代码加入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;
 }