公司同事之前整理的浏览器兼容问题处理方案：
知识库(这里只摘录部分重要的,详情请查看W3Help)
兼容性问题
浏览器内核
浏览器工作模式与DOCTYPE
兼容性问题根本原因
减少兼容性问题
确定运行环境
查询特性的兼容性
了解哪些写法会产生兼容性问题
编码的一些技巧
解决兼容性问题
案例一：应急可复用版本大部分页面在谷歌浏览器下点击列表查看按钮时横向菜单消失：
案例二：千万别用标签和标签：
结束语
知识库(这里只摘录部分重要的,详情请查看W3Help)
兼容性问题
目前市面上流行的浏览器有多种，这些浏览器在处理一个相同的页面时，表现或行为有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。
浏览器内核
各品牌浏览器的内核是不同的，不同的内核处理同一段代码的时候思路不同。因此可以说，浏览器间内核的差异是产生兼容性问题的根本原因。
浏览器名 | 渲染内核 | 脚本内核 |
IE | Trident | JScript |
Firefox | Gecko | TraceMonkey |
Chrome | WebKit | V8 |
Safari | WebKit | SquirrelFish Extreme |
浏览器工作模式与DOCTYPE
- 浏览器的工作模式被称为“渲染模式”，会影响“渲染方式+代码解析+脚本行为”；
- 目前渲染模式的分类主要有3种：标准模式（又名严格模式）、近似标准模式、混杂模式（又名怪异模式）。
- DOCTYPE的意义
在浏览器解析html文档正文前得先确定文档类型，以决定以何种方式渲染。渲染模式影响着浏览器对CSS代码甚至部分Javascript脚本的解析。
- 如果一个页面能使各浏览器都工作在“标准模式”下，那么各浏览器都将尽量兼容标准，因此各浏览器之间表现出的差异是很少的。相反，如果一个页面使各浏览器都工作在“混杂模式”下，那么各浏览器都将尽量向后兼容，因此各浏览器之间表现出的差异将会最大化。
- 各模式的触发条件
- HTML文档中没有DOCTYPE声明触发混杂模式
- HTML文档中用了错误的DOCTYPE会触发混杂模式
- HTML文档中有DOCTYPE，但DOCTYPE不是放在文档最开始，其之前出现了其他内容（包括普通文本、HTML标签、HTML注释、XML声明、IE条件注释）
- 若是普通文本和HTML标签，各浏览器均进入混杂模式
- 若是HTML注释，不会在页面中展示出来，故非IE浏览器会忽略其存在，正确解析DOCTYPE；IE浏览器则会进入混杂模式
- 若是IE条件注释，各浏览器均进入标准模式。所以如果真想在DOCTYPE之前写东西但又想保证标准模式可以这样做：<![if IE]><!—comment--><![endif]>
建议：DTD声明使用<!DOCTYPE HTML>，DTD声明之前不要写任何东西
兼容性问题根本原因
减少兼容性问题
确定运行环境
在开发前，我们要确定页面的运行环境：要兼容哪些浏览器，以及哪些屏幕分辨率。
查询特性的兼容性
了解哪些写法会产生兼容性问题
有时候一些兼容性问题的产生并不是因为我们的写法问题，而是浏览器自身的 bug（如 IE 6 的双边距问题），或者浏览器对标准的支持不一致。所以我们要了解哪些写法会产生兼容性问题，然后避免那样写。
编码的一些技巧
- 让用 IE 访问页面时，尽可能用最新的 IE 渲染引擎。通过加在 HTML 中加标签 <meta http-equiv="X-UA-Compatible" content="IE=edge">。
- 让双核浏览器（如 360，搜狗等国产浏览器）访问本网页时，用 webkit 内核来渲染。通过加在 HTML 中加标签<meta name="renderer" content="webkit">。（注：目前只有 360 浏览器支持）
- 用 HTML5 的 DocType：<!DOCTYPE html PUBLIC>。避免使用有问题的 DocType 而导致的浏览器用怪癖模式来渲染页面。
- 一些 CSS 属性记得要加浏览器前缀。比如-webkit-border-radius:4px;
IE9浏览器
- 做到这，我们就应该想到是不是<col>标签在Chrome浏览器中不被支持呢？然后我去翻看W3Help的文档文档，发现<col/>标签确实不被主流浏览器支持了。
