美文网首页
浏览器兼容

浏览器兼容

作者: jamesXiao_ | 来源:发表于2017-05-16 00:20 被阅读0次

    什么是 CSS hack

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

    谈一谈浏览器兼容的思路

    1. 要不要做
    • 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
    • 成本的角度 (有无必要做某件事)
    1. 做到什么程度
    • 让哪些浏览器支持哪些效果
    1. 如何做

    渐进增强和优雅降级

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

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

    1.浏览器兼容问题:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

    问题症状:常见症状是IE6中后面的一块被顶到下一行

    (稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

    解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

    备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

    2.浏览器兼容问题:设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度

    问题症状:IE6、7里这个标签的高度不受控制,超出自己设置的高度

    解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

    备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    3.浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

    问题症状:IE6里的间距比超过设置的间距

    解决方案:在display:block;后面加入display:inline;display:table;

    备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

    4.浏览器兼容问题:图片默认有间距

    问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了通配符也不起作用。

    解决方案:使用float属性为img布局

    备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

    5.浏览器兼容问题:标签最低高度设置min-height不兼容

    问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

    解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

    备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

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

    • 条件注释
      条件注释 (conditional comment) 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码
    • IE Hack
      使用特殊的符号或者方式写出只有IE浏览器可以解析的代码,有CSS属性前缀法、选择器前缀法以及IE条件注释法
    • js 能力检测
      使用JS的语法检测浏览器支持的属性,以便展示效果
    • html5shiv.js
      用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。
    • respond.js
      让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
    • css reset
      通过重新定义标签样式,“覆盖”浏览器的CSS默认属性
    • normalize.css
      Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
    • Modernizr
      Modernizr是一个 JavaScript 库,用于检测用户浏览器的 HTML5 与 CSS3 特性。
    • postCSS
      PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合,转化css3的新特性语法、行内图片等。

    常见属性的兼容情况

    • inline-block: >=ie8
    • min-width/min-height: >=ie8
    • :before,:after: >=ie8
    • div:hover: >=ie7
    • inline-block: >=ie8
    • background-size: >=ie9
    • 圆角: >= ie9
    • 阴影: >= ie9
    • 动画/渐变: >= ie10

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

    caniuse.com 查CSS属性兼容
    browserhacks 查 Hack 的写法

    相关文章

      网友评论

          本文标题:浏览器兼容

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