css 浏览器兼容

2017-04-09  本文已影响0人  柏龙

什么是 CSS hack

CSS hack指浏览器各版本之间对CSS解析后展现的效果不一样,针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果就叫作CSS Hack。

谈一谈浏览器兼容的思路

  1. 产品的需求(实用于哪些用户、浏览器比例、效果优先还是基本功能优先)
  2. 做到什么程度(让哪些浏览器支持哪些效果)
  3. 根据兼容需求选择兼容工具 html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS
  4. 根据兼容需求选择技术框架
    比如:Bootstrap(>=ie8);jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9);Vue (>= ie9)
  5. 条件注释、CSS Hack、js 能力检测做一些修补

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

Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
<!--[if IE 6]> 
    <p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!--> 
    <script>alert(1);</script> 
<!--<![endif]-->
<!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet"> 
<![endif]-->
.box {
    color: red;
    _color: blue; /*ie6*/
    *color: pink; /*ie67*/
    color: yellow\9;  /*ie/edge 6-8*/
}
.target{
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 仅对ie67有效 */
}

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

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

Can I use

上一篇下一篇

猜你喜欢

热点阅读