浏览器兼容

2017-06-10  本文已影响0人  饥人谷_啦啦啦

什么是CSS hack?

不同浏览器,或者相同浏览器的不同版本,对CSS的解析可能不同,导致页面展现效果不一致。为了达到预期的展现效果,我们需要对不同浏览器的某些样式写不同的CSS。
CSS hack 的三种常见方法

谈一谈浏览器兼容的思路。

  1. 要不要去兼容?

首先,需要知道产品定位是什么,针对什么样的人群?必须针对所有用户,还是只是针对特定人群?是否有无必要为了少部分人群来增加成本?

  1. 兼容到什么程度?

必须展现与最新浏览器展现一样的效果?还是说只兼顾到部分效果?还是最低层次的满足基本使用功能,不出现排版混乱?

  1. 用什么样的方式去兼容?

渐进增强?还是优雅降级?

  1. 选择合适的库及工具,实现兼容

选择好整体方法及思路以后,就可以选择合适的库,针对不同的问题,采取不同的方法来处理兼容性问题了。

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

  1. 条件注释。
<!--[if IE 6]-->
<p>adfad</p>
<![endif]-->//如果是IE6 就会有<p>
<!--[if !IE]--><!-->
####
<!--<![endif]-->//如果不是IE 

常见的有
[if !IE]//如果不是IE.
[if lt IE 5.5]//如果小于IE5.5版本
[if lte IE 6]//如果小于等于IE 6版本
[if gt IE 7]//如果大于IE 7版本
[if gte IE 8]//若果大于等于IE 8版本
[if (IE 6)|(IE 7)]//如果是IE 6 或者 IE 7

  1. 属性前缀
    .box {
    color:red;
    color:pink\9;
    *color:blue;
    _color:yellow;
    }
    ie 6 黄色,IE 7蓝色,IE8-10粉色,其他红色。

-webkit- ,针对safari,chrome浏览器的内核CSS写法
-moz-,针对firefox浏览器的内核CSS写法
-ms-,针对ie内核的CSS写法
-o-,针对Opera内核的CSS写法

  1. 选择器前缀

*.clear {}只有IE6和IE7可以识别这个选择器。

常见的属性兼容性

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

查询属性兼容性

caniuse.com 兼容性查询
browserhacks.com hack写法

上一篇 下一篇

猜你喜欢

热点阅读