美文网首页
浏览器兼容问题

浏览器兼容问题

作者: 饥人谷_流水 | 来源:发表于2017-04-15 14:04 被阅读0次

1. 什么是 CSS hack

  • CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。针对不同的浏览器写不同的css,能在不同的浏览器得到想要的效果。
    简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

2. 谈一谈浏览器兼容的思路

1 . 要不要做

  • 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
  • 成本的角度 (有无必要做某件事)

2 . 做到什么程度

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

3 . 如何做

渐进增强和优雅降级

  • 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  • 优雅降级 (graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

3. 浏览器兼容的写法

  • *, ie6,ie7可以识别;
  • _和- , ie6可以识别;
  • !important ,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性,但不认识!important的优先级;
  • -webkit- ,针对safari,chrome浏览器的内核CSS写法
  • -moz-,针对firefox浏览器的内核CSS写法
  • -ms-,针对ie内核的CSS写法
  • -o-,针对Opera内核的CSS写法
条件注释法:



<script>alert(1);</script>

属性前缀法:

inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9

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

  • 条件注释:条件注释是一种安全的区分IE浏览器版本的语法,是一种浏览器兼容的方法。微软已宣布于IE10停止支持条件注释。

  • IE Hack:针对IE浏览器编写不同的CSS,让IE能够正常渲染

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

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

  • Respond.js : 是一个小脚本,用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计。

  • css reset:把浏览器提供的默认样式覆盖掉

  • normalize.css:是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。保留有用的默认值,不同于许多 CSS 的重置;标准化的样式,适用范围广的元素;纠正错误和常见的浏览器的不一致性;一些细微的改进,提高了易用性;使用详细的注释来解释代码。

  • Modernizr:Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
    Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。

  • postCSS:它可以被理解为一个平台,可以让一些插件在上面跑,它提供了一个解析器,可以将CSS解析成抽象语法树,通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer,它可以帮我们处理兼容问题,只需正常写CSS,autoprefixer可以帮我的自动生成兼容性代码

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

相关文章

  • 浏览器兼容

    什么是浏览器兼容问题 为什么会有浏览器兼容问题 用到的网站 处理兼容问题的思路 渐进增强和优雅降级 stackov...

  • 常见浏览器兼容问题及解决

    一、什么是浏览器兼容问题所谓浏览器兼容问题就是指不同浏览器或同种浏览器不同版本对相同代码解析效果不同,浏览器兼容问...

  • 浏览器兼容

    为何会有浏览器兼容问题 因为市场上的浏览器有很多,不同的浏览器内核对网页的解析存在差异,这也是导致浏览器兼容问题出...

  • 浏览器兼容

    1. 概要 什么是浏览器兼容问题? 同一份代码,有的浏览器效果正常,有的不正常 为什么会有浏览器兼容问题 同一产品...

  • 浏览器兼容相关概念

    什么是浏览器兼容问题?为什么会有浏览器兼容问题? 同一份代码,有的浏览器效果正常,有的不正常 同一产品,版本越老 ...

  • 浏览器兼容

    什么是浏览器兼容问题 同一份代码,有的浏览器效果正常,有的不正常 为什么会有浏览器兼容问题 同一产品,版本越老 b...

  • Browser Hack整理

    浏览器的兼容问题 1.浏览器内核:Mozilla Firefox ( Gecko )Internet Explor...

  • 盒模型 IE与W3C

    ![Uploading image_302998.png . . .] 浏览器兼容问题 由于IE浏览器使用自己的非...

  • 浏览器能力检测

    浏览器的兼容问题是前端开发避不开的一个问题,我们在处理浏览器兼容问题时,可以采取第三方插件来做兼容,或者是浏览器能...

  • Html引用实现不同浏览器兼容问题

    Html引用实现不同浏览器兼容问题 在head部分插入即可

网友评论

      本文标题:浏览器兼容问题

      本文链接:https://www.haomeiwen.com/subject/kpvnattx.html