浏览器兼容问题

什么是css hack

css hack 由于不同厂商的浏览器，比如Internet Explorer、 Safar、 Mozilla Firefox、
Chorme等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

谈一谈浏览器兼容的思路

• 要不要做
  • 产品的角度（产品的受众，及受众使用的各浏览器的比例，效果优先还是基本功能优先。）
  • 产品成本角度(成本的考虑，投入产出比。)
• 做到什么程度
  • 兼容哪些浏览器，兼容到什么版本，让哪些浏览器支持哪些效果。
• 如何去做

  • 渐进增强和优雅降级的选择

    逐渐增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

    区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

  • 根据兼容需求选择技术框架/库(jquery)

  • 根据兼容需求选择兼容工具（html5shiv.js，respond.js CSS复位normalize.css，Modernizr的）

列举5种以上浏览器兼容的写法

• 条件注释法

  
  注释条件

         例子：
        <!--[if IE 6]>
        <p>you are using Internet Explorer 6.</p>
        <![endif]-->
        <!--[if  !IE]><!-->
        <script> alert(1);</script>
        <!--<!--[endif]-->
        <!--[if IE 8]>
        <link href="ie8only.css" rel="stylesheet"></link>
        <![endif]-->
  

  • css属性前缀法(即类内部Hack) ：属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
    例子：
    .div{
    color: red;
    *color: blue; IE6,IE7
    _color: green; IE7
    color: pink\9; IE6~IE10
    }

• 选择器前缀法(即选择器Hack)

以下工具/名词是做什么的

• 条件注释
• IE Hack
• js 能力检测
• html5shiv.js
• respond.js
• css reset
• normalize.css
• Modernizr
• postCSS

条件注释：条件注释是一种安全的区分IE浏览器版本的语法，且被认为是取代针对IE css hack的首选办法。
1.条件注释只能用于IE5以上,和IE10以下。
2.如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
3.条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
4.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

注释条件
例子：

        <!--[if IE 6]>
        <p>you are using Internet Explorer 6.</p>
        <![endif]-->
        <!--[if  !IE]><!-->
        <script> alert(1);</script>
        <!--<!--[endif]-->
        <!--[if IE 8]>
        <link href="ie8only.css" rel="stylesheet"></link>
        <![endif]-->

条件注释参考文本

IE hack: 使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法
1.CSS属性前缀法：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等
2.比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等
3.HTML头部引用(if IE)Hack：针对所有IE：<![endif]-->，针对IE6及以下版本：<![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
4.书写顺序，一般是将识别能力强的浏览器的CSS写在前面。浏览器优先级别:FF < IE7 < IE6 , CSS hack书写顺序一般为FF IE7 IE6

参考js 能力检测:浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。

html5shiv.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题
参考文本
html5shiv.js

respond.js:用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
参考文本
respond.js

css reset:将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。
(CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。)

参考

normalize.css:是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一.
(Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。)

1. 保留有用的默认值，不同于许多 CSS reset 的简单粗暴。
2. 标准化的样式，适用范围广的元素。
3. 纠正错误和常见的浏览器的不一致性。
4. 一些细微的改进，提高了易用性。
5. 使用详细的注释来解释代码。
   参考

** Modernizr**:当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，同时也会检测是否支持HTML5的特性。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。
参考
Modernizr.js

postCSS:PostCSS 是一套利用JS插件实现的用来改变CSS的工具.这些插件能够支持变量和混合语法，转换未来CSS语法，内联图片，还有更多
参考

一般在哪个网站查询属性兼容性？

can i ues