浏览器兼容

作者: marmot_ning | 来源:发表于2017-08-15 07:51 被阅读0次

浏览器前缀 js输出
浏览器前缀js输出
浏览器前缀 js输出
浏览器前缀 js输出
ESModule 浏览器兼容性
浏览器前缀，js简介
2019-06-05
常见浏览器兼容问题及解决
浏览器常见的兼容问题
CSS浏览器前缀

浏览器兼容

什么是 CSS hack

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

谈一谈浏览器兼容的思路

要不要做
1. BOSS是否有直接要求（是否能说服BOSS不做）
2. 产品角度考虑（产品定位的受众是那些，根据效果和稳定性做取舍，选择体验优先还是稳定性优先）
3. 成本（有无必要去做）
做到什么程度
需要兼容哪些浏览器，兼容到什么版本
如何来做
1. 根据兼容需求选择技术框架/库(jquery)
  Bootstrap (>=ie8)
  jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
  Vue (>= ie9)
2. 根据兼容需求选择兼容工具
  html5shiv.js
  respond.js
  css reset
  normalize.css
  Modernizr
  postCSS
3. 条件注释、CSS Hack、js 能力检测做一些修补
4. 渐进增强和优雅降级的选择

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

条件注释

 <!--[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]-->

条件注释：

条件注释

CSS hack

属性选择器

 box{
 color: red; 
 _color: blue; /*ie6*/
*color: pink; /*ie67*/ 
 color: yellow\9; /*ie/edge 6-8*/}

选择器前缀法

 *html *前缀只对IE6生效
 *+html *+前缀只对IE7生效
   @media screen\9{...}只对IE6/7生效

IE条件注释

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

容器坍塌

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

inline-block属性

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

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

条件注释      /*条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码（IE10以上不再支持条件注释） */
IE Hack      /*主要是针对ie浏览器不同版本的特性，编写适应兼容不同ie浏览器的代码方案 */
js 能力检测      /*检测浏览器是否支持某种特定的能力，然后给出特定的解决方案 */
html5shiv.js      /* 用于解决ie低版本浏览器对HTML5新增标签不识别导致CSS不起作用的脚本*/
respond.js      /* 模拟css3的媒体查询，主要是解决ie低版本浏览器不支持媒体查询，解决低版本浏览器的响应式问题*/
css rese      /*重新定义标签样式，“覆盖”浏览器的CSS默认属性 */
normalize.css      /*可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一 */
Modernizr      /*modernizr是一套JavaScript库，可以用来检测浏览器对html5和css3的特性有哪些支持哪些不支持 */
postCSS      /*postcss是通过JavaScript语言对css语句进行处理，然后再用已选用的插件进行处理和显示 */