葡萄藤PPT

1.背景介绍

浏览器兼容性的起源

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。简单的来说就是各大浏览器厂商有着一套属于自己的标准，浏览器各自推出非标准的语句以专有的特色功能分割市场。然而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，这就是我们常说的浏览器兼容性问题。

浏览器大战

浏览器大战，指不同的网络浏览器之间的市场份额竞争。常用来指以下两组竞争：第一组是 20世纪时微软公司的Internet Explorer取代了网景公司的Netscape Navigator主导地位。第二组为2003年后Internet Explorer份额遭其他浏览器蚕食，包括Mozilla Firefox，Google Chrome， Safari和Opera。

2.知识剖析

什么是CSS hack

Hack，顾名思义是修改的意思，由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/ Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

3.常见问题

遇到浏览器常见的兼容性问题有哪些解决方法？

常用hack的技巧有哪些？

4.解决方案

1.遇到浏览器常见的兼容性问题有哪些解决方法？

问题：Firefox浏览器点击链接出现的虚线框；

方法：我们可以给a标签设置outline属性： a{outline:none;} a:focus{outline:none;}

问题：谷歌浏览器字体的最小为12px，当字体设置小于12px时也只能显示为12px；

方法：使用transform属性来改变字体大小；

2.常用hack的技巧有哪些？

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线 "_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child +html .class{}。
IE条件注释法(即HTML条件注释Hack)：即针对所有IE的条件注释

5.编码实战

6.扩展思考

CSS样式重置

前面提到了网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致：不同浏览器的默认样式之间会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。这种情况让人不由从浏览器的兼容性引申到样式重置；所以这面对这个问题的时候，有些人给出的解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。覆盖浏览器的CSS默认属性。把浏览器提供的默认样式覆盖掉，这就是样式重置。

样式重置的作用：CSS样式重置让各个浏览器的CSS样式有一个统一的基准，而实现这一基准最主要的方式就是将这些样式统统清零

样式重置的的不足

1.不当地破坏了所有浏览器的基本样式，例如使用*{margin:0;padding:0},去掉ol,ul的列表样式，使得一些语义元素缺乏恰当的样式表现。

2.粗暴的reset使得一些交互控件外观在浏览器下失调，例如去掉了outline，使得交互控件缺乏视觉反馈。

3.增加浏览器样式计算成本，有一定的性能负担，因为平白无故的增加了CSS文件的大小，增加了很多的渲染。

7.参考文献

参考资料：https://blog.csdn.net/freshlover/article/details/12132801

—— 史上最全的CSS hack方式一览

参考资料：https://blog.csdn.net/xustart7720/article/details/73604651/

——WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

参考资料：https://blog.csdn.net/kang_hui/article/details/12156673

——浏览器兼容问题

8.更多讨论

hack的利与弊？

随着发展hack是否还有必要？

鸣谢

感谢大家观看

BY : 钟华俊

【CSS-task15】

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？