浏览器兼容

1. 考虑受众和成本，去判断要不要进行浏览器兼容。

• 比如受众是电脑盲，很多用老版本浏览器的，那么必须考虑向下兼容

2. 考虑浏览器要支持那些效果

• 让哪些浏览器支持哪些效果

3. 代码上：

• 根据兼容需求选择库和插件(如Jquery)
• 选择兼容工具，如（css reset）
• 条件注释，css hack、js能力监测
• 渐进式开发：先开发基本功能保证对于低版本浏览器的兼容，再针对高版本浏览器设计高级功能
• 优先降级：一开始构建完整功能，再对低版本浏览器进行兼容

 

CSS hack

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack 就是让你记住这个标准），以达到应用不同的 CSS 样式的目的，比如 .kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用 width:300px; 的样式，紧接着后面还有个_width:200px; 由于下划线 _width 只有 IE6 可以识别，所以此样式在 IE6 中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别 _width 不会执行 _width:200px; 这句样式，所以在其他浏览器中设置对象的宽度就是 300px;

 

简单地讲， CSS hack 指各版本及各品牌浏览器之间对 CSS 解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些误差就像 JS 一样，一个 JS 网页特效，在微软 IE6、IE7、IE8 浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做 JS hack ，所以我们对于 CSS 来说他们来解决各浏览器对 CSS 解释不同所采取的区别不同浏览器制作不同的 CSS 样式的设置来解决这些问题就叫作 CSS Hack。

 

 

CSS Hack常见的有三种形式：CSS 属性 Hack、CSS 选择符 Hack 以及 IE 条件注释 Hack， Hack 主要针对IE 浏览器。

1、属性级 Hack：比如 IE6 能识别下划线_和星号 * ，IE7 能识别星号 * ，但不能识别下划线_，而 firefox 两个都不能认识。

2、选择符级 Hack：比如 IE6 能识别 *html .class{}，IE7能识别 *+html .class{} 或者 *:first-child+html .class{}。

3、IE 条件注释 Hack：IE条件注释是微软从 IE5 开始就提供的一种非标准逻辑语句。比如针对所有IE：<!–[if IE]><!–您的代码–><![endif]–>，针对 IE6 及以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>，这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。

 

css hack兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但 IE 不会.(可用 !important 解决)

2, 居中问题
①.垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
②.水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应

7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE