关于各大浏览器兼容问题（1）

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题

CSS篇

一、不同浏览器的标签默认的外补丁和内补丁不同

问题表现：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：CSS里    *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

二、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大

问题表现：IE6后面的一块被顶到下一行

解决方案：在float的标签样式控制中加入display:inline;转化为行内属性

备注：横向浮动的div布局，使用上margin进行边界设置时，必然会碰到此问题

三、设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值

问题表现：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

备注：一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度，即使标签是空内容，标签的高度还是会有默认行高。

四、行内属性标签，设置display:block后采用float布局，又有横向的margin情况，IE6间距bug

问题表现：IE6的间距比超过设置的间距

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在用float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，高度失效，所有在后面补上display:table。

五、图片默认有间距

问题表现：几个img标签放在一块，有些浏览器会有默认的间距，有通配符也不起作用

解决方案：使用float属性为img布局

备注：img标签是行内属性标签，只要不超出容器高度，img会排在一行里，使用float是比较好的选择

六、标签最低高度设置min-height不兼容

问题表现：min-height本身就是一个不兼容的css属性，所以设置min-height时不能兼容所有浏览器

解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;

height: 200px; overflow:visible;}

备注：b/s系统前端时，当内容小于一个值时，容器的高度保持该值，当内容大于该值时，高度自适应且不出现滚动条。

七、光标手形

问题表现：firefox不支持hand，但ie支持pointer

解决方案：统一使用cursor:pointer;

八、字体大小定义不同

问题表现：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大

解决方法：使用指定的字体大小如14px或者使用em

九、IE6 3px bug

问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型一列固定，第二列自适应，IE6出现之间3px间隙

解决方法：对左侧left的盒子补上_margin-right: -3px;

CSS hack

先举一个小例子，简要说明一下CSS hack是干啥的。

比如要分辨IE6和firefox两种浏览器，可以这样写：

div{

background:green;/*forfirefox*/

*background:red;/*forIE6*/(bothIE6&&IE7)

}

在IE6中看到是红色的，在firefox中看到是绿色的。

解释一下：

上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

css hack就是通过这种方式来对浏览器进行兼容性处理。也就是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。因此我们就可以根据不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

针对不同浏览器的网站设计代码总结如下

1、针对I E 系列浏览器的网站设计代码      

 针对 IE 6 的专属 CSS Hack 网站设计代码        #id{  _display: block;  } 也就是在网站设计CSS属性前加一个小划线就好。      

 针对 IE 7 的专属 CSS Hack 网站设计代码        #id{ *display: block; } 即在网站设计CSS属性前加上一个星号。    

 针对 IE 8 的专属 CSS Hack 网站设计代码        #id{ margin-top: 10px /9; /*IE8*/} 如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可  。

2、针对火狐的CSS Hack 网站设计代码    

想要解决火狐的兼容性只要将CSS代码写入到 @-moz-document url-prefix（）{ } 里面就行了 , 例如  @-moz-document url-prefix()  {    #id{ display: block; }  }  。

3、针对 Safari 的CSS Hack 网站设计代码  

Safari是苹果中新的浏览器，解决兼容性的做法是加上@media screen and (-webkit-min-device-pixel-ratio:0)前缀。例如@media screen and (-webkit-min-device-pixel-ratio:0)  {    #id { display: block; }  }  兼容性做法和火狐相近。

4、针对 Opera 的CSS Hack 网站设计代码

Opera解决兼容性的做法也是加上选择器前缀，例如 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {  head~body #id { display: block; }   }   这个世界上必然不会存在绝对完美的事物，因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准。

JS篇

1. 集合类对象的()与[]的问题
IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。
Js代码 ：
document.write(document.forms("formName").src);
//该写法在IE下能访问到Form对象的src属性
解决办法：将document.forms("formName")改为 document.forms["formName"]。统一使用[]获取集合类对象。

2. 对浏览器Native组件调用属性、方法大小写问题
IE：不区分大小写
FF、Chrome：区分大小写
如：Ajax返回的response对象，IE支持response.responseXml和responseXML；FF等浏览器支持response.responseXML，解决办法只有在编写程序时尽量避免不兼容的写法

3. new Date().getYear()
分析原因：在IE中得到的日期是2011，在FF和Safari中看到的日期是111，原因是在FF和safari返回的是当前年份-1900的值。
兼容处理：
Js代码：

//方式一  
var year= new Date().getYear();  
year = (year<1900?(1900+year):year);  
document.write(year);  


//方式二  
var year = new Date().getFullYear();  
document.write(year);  

4. innerText的使用
分析原因:FF不支持innerText，它支持textContent来实现innerText，不过textContent没有像innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用innerHTML代替。
兼容处理
通过判断不同浏览器做不同的处理
Js代码 javascript

if(document.all){  
   document.getElementById('element').innerText = "mytext";  
} else{  
   document.getElementById('element').textContent = "mytext";  
}  

注：Safari和Chrome对innerText和textContent都支持

5. Frame的引用
【分析原因】
IE可以通过id或者name访问这个frame对应的window对象；而FF只可以通过name来访问这个frame对应的window对象。

【应用场景】
在一个页面嵌套了一个iframe页面(下面简称父页面和子页面)。父页面取子页面的值。
Js代码

<iframe id="frame_id" src="frametest.jsp" width="100%" height="100%" title="你好世界">  

此时如果父页面想获取子页面例如div中的显示值，IE下可以这样写：

 var obj = window.top.frame_id.document.getElementById(div_id);
 alert(obj.innerText);

但是在FF中却无法取子页面中的值，原因就是FF只支持window.top.frameName来访问子页面中的window对象。所以在IE、safari中是支持通过frameName或是frameId来访问子页面window对象的。
解决方法：
1、尽量都是用frameName去访问子页面window对象。
2、在FF、IE、Safari中都支持window.document.getElementById(frameId)来获得子页面window对象。

HTML 篇

1. 如有以下这样一段代码：

<div id="test">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>

单从HTML结构表象来看，ID test 一共有3个P元素子节点。其实，在IE下，这种表象就是实质，而在非IE下，表象的外衣将顷刻被撕开。
　　为了看出这种区别，我们可以遍历test的子节点，并将其节点个数及节点类型都打印出来：

<script type="text/javascript">
var x = document.getElementById("test");
var xc = x.childNodes;
var xcl = xc.length;
for(var i=0;i<xcl;i++){
document.write("nodeName = " + xc[i].nodeName + "; nodeType = " + xc[i].nodeType + "<br />");
</script>

IE的打印结果为：

nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1

非IE的打印结果为：

nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3

显而易见，IE的打印结果和我们所说的表象一样：有3个子节点，并且都为P元素；而非IE则表现出极大的差异：居然打印出了7个子节点，当然也包括3个P元素子节点在内，除此之外还多了4个nodeType=3的子节点，我们都知道节点类型为3的节点属于文本节点，但从那段HTML中可以看P与 P之间并无其它的内容出现，那这4个文本节点是怎样凭空出现的呢？
　　在这种情况下，唯一有可能的原因就是在HTML的书写上，因为这段HTML并不是连续的书写，而是每个节点间都用回车换行了，并且正好出现了4次换行，也许非IE把换行也当成了一个节点。
　　为了测试，我们可以将那段HTML改写为：

<div id="test"><p>文字</p><p>文字</p><p>文字</p></div>

IE的打印结果与非IE打印结果 均为：

nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1

预想中的情况出现了，这回不论什么浏览器打印出来的都只是3个P子节点

参考网页：http://bbs.jointforce.com/topic/20742?utm_source=tuicool&utm_medium=referral

参考网页：https://www.jianshu.com/p/a1f237dacf5b