HTML css和js浏览器兼容问题
什么是浏览器兼容？
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。
为什么浏览器会存在兼容问题？
同一浏览器，版本越老，存在bug越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。
不同浏览器，核心技术不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。
HTML与Css样式浏览器兼容
1、不同浏览器默认的内外边距不同的问题
解决： *{margin:0;padding:0;}
2、不同浏览器水平居中的问题：ie6-7文本居中，嵌套的块元素也会居中 ，ff /opera /safari /ie8文本会居中，嵌套块不会居中
解决： 块元素设置 margin-left:auto;margin-right:auto 或margin:0 auto; 或外层嵌套div设置<div align=”center”></div>
浮动块元素的居中：<div style="margin:0px auto;">
<div style="float:left;"></div></div>
3、不同浏览器垂直居中的问题 ： 在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中
解决： 给容器设置一个与其高度相同的行高 line-height:与容器的height一样
4、不同浏览器关于高度问题 ： 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 如果设定了高度，内容过 多时，ie6下会自动增加高度、其他浏览器会超出边框
解决： 1.设置overflow:hidden; 2.高度自增height:auto!important;height:100px;
5、IE6 默认的div高度问题： ie6默认div高度为一个字体显示的高度，在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度
解决：为这个容器设置下列属性之一 1、设置overflow:hidden; 2、设置line-height:1px; 3、设置zoom:0.08
6、IE6 最小高度(宽度)的问题： ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
解决： 使用ie6不支持但其余浏览器支持的属性!important。 设置属性min-height:200px; height:auto !important; height:200px;
7、td高度的问题 ： table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
解决： 设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示
8、div嵌套p时，出现空白行问题：div中显示<p>文本</p>，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。
解决：设置p的margin:0px，再设置div的padding-top和padding-bottom
9、IE6-7图片下面有空隙的问题：块元素中含有图片时，ie6-7中会出现图片下有空隙
解决：（1）、在源代码中让</div>和<img>在同一行
（2）、将图片转换为块级对象display:block;
（3）、设置图片的垂直对齐方式 vertical-align:top/middle/bottom
（4）、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden;
（5）、设置图片的浮动属性 float:left;
10、IE6双倍边距的问题 ： ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题 例float:left;width:100px;margin:0 100px;
解决： 设置display:inline;
11、IE6两个层之间3px的问题： 左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距
解决： 1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px;
12、IE6 子元素绝对定位的问题： 父级元素使用padding后，子元素使用绝对定位，不能精确定位
解决： 在子元素中设置 _left:-20px; _top:-1px;
13、显示手型cursor:hand 问题： ie6/7/8、opera 都支持 ，但是safari 、 ff 不支持
解决： 写成 cursor:pointer; (所有浏览器都能识别)
14、IE6-7 line-height失效的问题： 在ie中img与文字放一起时， line-height不起作用
解决：都设置成float；
15、td自动换行的问题 ： Table宽度固定，td自动换行
解决： 设置Table的table-layout:fixed，td的word-wrap:break-word
16、子容器浮动后，父容器扩展问题： 子容器都float以后，父容器没有设定高度,父容器将不会扩展
解决： 只需要添加一个clear:both的div，代码如下：
<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>
17、透明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 */
18、list-style-position默认值的问题： ie下list-style-position默认为inside, firefox默认为outside
解决： css中指定为outside即可解决兼容性问题
19、 list-style-image准确定位的问题： li前设置图片时，图片与其后的文字对齐问题
解决：1、采用背景定位 和 字符缩进的方法 background:url() no-repeat left center; text-index:16px;
2、采用相对定位方法 li 设置list-style:url(); li的子元素position:relative;top:-5px;
20、ul标签默认值的问题 ： ul标签在ff中默认是有padding值的,而在ie中只有margin有值
解决： 定义ul{margin:0;padding:0;}就能解决大部分问题
21、IE中li指定高度后，出现排版错误 问题： 在ie下如果为li指定高度可能会出现排版错位
解决： 设置line-height
22、ul或li浮动后，显示在div外 问题： div中的ul或li设置float以后，都不在div中
解决： 必须在ul标签后加<div style="clear:both"></div>来闭合外层div
23、ul或者li浮动后，margin变大 问题： ul设置 float后，在ie中margin将变大
解决： 设置ul的display:inline，li的list-style-position:outside；li浮动问题设置li的display:inline
24、嵌套使用ul、li的问题： ie的bug，嵌套使用ul、li时，里层的li设置float以后，外层li不设置float, 里面的ul顶部和它外面的li总是有一段间距
解决： 设置里面的ul的zoom:1
25、 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解决。
26、IE6 垂直列表间隙的问题： li中有a且设置display:block时，ie6中列表间会出现空隙
解决： 1、li中加display:inline; 2、li使用float 然后 clear:both; 3、给包含的文本末尾添加一个空格 4、设置width
27、IE6 列表背景颜色失效的问题 ： 当父元素设置position:relative;时，在ie6中第一个ul、ol、dl的背景颜色失效
解决： ul、ol、dl 都设置为position:relative;
28、IE6-7 列表背景颜色失效的问题2 ： 做横向导航栏时，ul设置为float且有背景色，li设置为float。ie6-7背景颜色失效
解决： 很多ie的bug都可以通过触发layout来解决 ul添加属性 1、height:1%; 2、float:left; 3、zoom:1;
29、列表不能换行的问题 ： li设置为浮动，后面的li紧随其后，不能换行
解决： 1、为这个ul定义合适的宽高 2、给包含这个ul 的父div定义合适的宽高。
30、超链接访问过后hover样式不出现的问题 ： 击超链接后，hover、active样式没有效果
解决： 改变CSS属性的排列顺序: L-V-H-A
31、 禁用中文输入法的问题 ： 不能在输入框中输入汉字
解决： 只在ie系列 和ff中有效 ime-mode:disabled (但可以粘贴) 禁用粘贴： onpaste="return false"
32、除去滚动条的问题 ： 隐藏滚动条
解决： 1、只有ie6-7支持<body scroll="no"> 2、除ie6-7不支持 body{overflow:hidden} 3、所有浏览器 html{overflow:hidden}
33、让层显示在FLASH之上：
解决：把FLASH设置透明 1、<param name=" wmode " value="transparent" /> 2、<param name="wmode" value="opaque"/>
34、去除链接虚线边框的问题 ： 当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框
解决： ie6/7中 设置为a { blr:expression(this.onFocus=this.blur()) } ie8 和 ff 都不支持expression 在ie8 、ff中设置为 :focus { outline: none; }
35、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%;
36、IE6背景闪烁的问题：链接、按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。原因是:IE6没有将背景图缓存，每次触发hover的时候都会重新加载
解决：用JavaScript设置ie6缓存这些图片： document.execCommand("BackgroundImageCache ",false,true);
37、ff、chrome绝对定位无效 问题： 在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和Chrome下却不可以。
解决：设置td的display:block。
38、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
39、float的div闭合的问题：
例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)
这段代码在IE中毫无问题，问题出在其他浏览器中。原因是NOTfloatC并非float标签，必须将float标签 闭合。
解决：
在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会 产生异常。并且将clear这种样式定义为为如下即可：.clear{ clear:both;}
40、选框、复选框与后面的文字对不齐 问题：
解决：
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left; padding-top:3px; *padding-top:5px;}
不足之处：设置padding后高度和宽带都会增加
41、边框重叠说明 说明：
为 table、td 都指定了边框后，然后使用border-collapse:collapse让边框重叠，可以看出在发生重叠时，Firefox 是用 td 覆盖 table 的，而 IE 是用 table 覆盖 td 的。使用时候需要注意。
42、设置td padding的说明：
设置td的padding以后高度和宽带都会增加,padding-left和padding-right的效果都一样增加了td的宽带，但是padding-top和padding-bottom的效果不一样。最好不要使用td的ding-top和padding-bottom
43、使一个层垂直居中于浏览器中 说明：
使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二
div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }
44、行内属性标签，设置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。
45、高度塌陷问题
发生高度塌陷原因 ：父元素未设置高度，子元素发生浮动
（1）给父元素添加声明 overflow：hidden
（2）在最后一个浮动元素下方添加div并给该元素下方添加div，并给该元素添加声明
（clear：both；height:0;overflow:hidden）;
(3) 万能清除浮动法：父类选择器：after{content：“.”clear:both;display:block;height:0:overflow:hidden;visibility:hidden;}
1.HTML对象获取问题
FireFox：document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”).
解决办法：统一使用document.getElementById(“idName”);
2.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法：统一使用var关键字来定义常量.
3.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.
4.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法：使用window.location来代替window.location.href.
5.frame问题
以下面的frame为例：
|
1 |
<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”;
6.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如：var parWin = window.opener; parWin.document.getElementById(“Aqing”).value = “Aqing”;
7.firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
8.document.formName.item(”itemName”) 问题
问题说明：IE下，可以使用document.formName.item(”itemName”) 或document.formName.elements [“elementName”]；Firefox 下，只能使用document.formName.elements[“elementName”]。
解决方法：统一使用document.formName.elements[“elementName”]。
9.集合类对象问题
问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。
10.自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性；Firefox下，只能使用getAttribute() 获取自定义属性。
解决方法：统一通过getAttribute() 获取自定义属性。
11.input.type属性问题
问题说明：IE下input.type属性为只读；但是Firefox下input.type属性为读写。
解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。
12.event.srcElement问题
问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ?event.srcElement : event.target;
如果考虑第8条问题，就改用myEvent代替event即可。
13.body载入问题
问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证，待验证后再来修改。
[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。
14.事件委托方法
问题说明：IE下，使用document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用document.body.onload = inject();
解决方法：统一使用document.body.onload=new Function('inject()'); 或者document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别。
15.Table操作问题
问题说明：ie、firefox以及其它浏览器对于 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。
