麻辣小隔壁
麻辣小隔壁

浏览器兼容性？！

序章

  • 谈谈“浏览器兼容性”的问题？
    • 很多前端的面试或笔试中，都有比较笼统的“说说你所知道的各浏览器存在的兼容问题”，个人感觉这个问题问的太“大”了些，从样式到脚本，都会有很多不一样的地方（特别是IE8-对比主流浏览器）。实际回答的时候就会晕乎乎的不清楚如何抓住重点地来阐述。到底怎样回答这个问题，才能较为全面又不失重点，并让面试官感到满意呢？
  • 首先明确一个概念，“谈谈浏览器兼容性”的问题和“说说你所知道的各浏览器存在的兼容问题”是两个完全不同的问题。
  • 前者，鬼知道他想要问什么，得追问。
    比如得问“您说的是哪个浏览器的哪类问题？还是常用浏览的（前端）API差异？渲 染差异？等等。还是要谈谈浏览器为什么存在兼容问题？兼容存在的历史原因？历史必然性等等”。
    后者，基本上是个有着较明确边界范围的开放问题。
    基本上可以知道，他是想了解你常用的常见到的常解决到的，或者近期刚刚解决过的一些浏览器兼容问题。从而判断你这部分知识面、解决问题的思路等等方面内容，而且不像前者一样慢无边界的。
    起码，这么问的是不太闲，不想陪你唠嗑的。
  • 如果面试官纠结于你没回答出某个兼容性问题，即使要了你也不要去。 特别是那种还在炫耀IE6+ 1px技能的老先生。 现在还谈IE6+兼容性的面试官，真的挺掉公司的价的。
  • 下面我们由浅到深，由简到易的回答这个笼统的“浏览器兼容性”问题！

CSS篇

1. 一些常见问题汇总

  • 浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
    问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
    碰到频率:100%
    解决方案：CSS里 *{margin:0;padding:0;}
    备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
  • 浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示 margin比设置的大
    问题症状:常见症状是IE6中后面的一块被顶到下一行
    碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
    解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
    备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
  • 浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
    问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
    碰到频率：60%
    解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
    备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
  • 浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
    问题症状：IE6里的间距比超过设置的间距
    碰到几率：20%
    解决方案：在display:block;后面加入display:inline;display:table;
    备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
  • 浏览器兼容问题五：图片默认有间距
    问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
    碰到几率：20%
    解决方案：使用float属性为img布局
    备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）
  • 浏览器兼容问题六：标签最低高度设置min-height不兼容
    问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
    碰到几率：5%
    解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

2. CSS hack

  • 请谨慎使用 css hack

  • In modern computing terminology, a kludge (or often a "hack") is a solution to a problem, doing a task, or fixing a system that is inefficient, inelegant, or even unfathomable, but which nevertheless (more or less) works.
    (from wiki: Kludge)
    也就是说，hack 是不优雅的、不是最有效的，甚至是不能理解的，但是能搞定问题的解决办法。
    那么 CSS hack 呢？CSS hack 就是利用浏览器一些不标准的，或者可以称之为 bug 的特性，达到特定的目的。最常见的各种 hack 是关于 ie 的，尤其是旧版本 ie。这种 hack 比较无奈，但是相对安全，因为旧版本 ie 不再更新了，不会发生变化了。
    但是，如果用一些当前浏览器的 bug 来 hack，就是有危险的了。这种 hack 建立在不稳定的浏览器特性上，没有标准可依。当浏览器厂商修复/标准化了这个特性的时候，hack 就可能失效。这样就解释了问题的这句话。

  • 说实话，笔者到现在为止还没有用到过CSS hack。个人认为原因有三：1. 笔者太菜，遇到的场景不够丰富，运气好没有踩到过坑；2.一些浏览器bug已经随着浏览器的版本更新被修复掉；3.遇到要使用CSS hack的情况了却没有意识到，换了种方式去实现了。最最最最究极原因，笔者所在的公司不需要支持 IE9 一下的老古董，甚至在某些项目里可以直接舍弃掉IE，是不是很羡慕？

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代码