乐鱼电竞

教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

浏览器的兼容性问题拾遗

更新时间:2018年09月13日15时57分 来源:乐鱼播客 浏览次数:

　　1.背景介绍浏览器兼容性的起源

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

　　浏览器大战

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

　　hack的缺点

　　使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担，反而会得不偿失。

　　什么情况下使用hack

　　一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下我们就必须使用hack技巧了。

　　3.常见问题及解决方案

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

　　方法：我们可以给a标签设 置outline属性：

　　a{outline:none;}

　　a:focus{outline:none;}

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

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

　　4.CSS样式重置

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

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

　　样式重置的的不足

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

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

　　3.增加浏览器样式计算成本，有一定的性能负担，因为平白无故的增加了CSS文件的大�。黾恿撕芏嗟匿秩�。

　　各大浏览器使用的内核

　　IE浏览器:使用trident内核;

　　Firefox浏览器：使用gecko内核;

　　safari浏览器：使用webkit内核;

　　opera浏览器：以前是presto内核，现在改用google chrome的Blink内核;

　　Chrome浏览器：使用Blink内核(基于webkit，google与opera software共同开发)



作者：乐鱼播客前端与移动开发培训学院

首发：http://web.itcast.cn


猜你喜欢：

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】