奇舞-兼容性-笔记

最新推荐文章于 2023-06-21 12:59:31 发布

爱lv行

最新推荐文章于 2023-06-21 12:59:31 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/u013165804/article/details/79611384

版权

浏览器浏览器兼容

css中的兼容性问题

浏览器不支持该特性
某些特定条件下触发浏览器bug

浏览器特性支持

了解浏览器支持情况

https://caniuse.com/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
https://tympanus.net/codrops/css_reference/
https://www.quirksmode.org/css/

你需要兼容哪些浏览器？

根据用户群体决定
- 面向普通用户：IE8 chrome Firefox
- 面向企业产品 IE9 chrome firegox
了解浏览器市场份额
- 日志分析
- 百度统计 NetMarketShare

浏览器不支持时怎么办？

如果低版本浏览器没有这个特性可以接受吗？
- border-radius 不支持时，没有圆角
- box-shadow 不支持可，没有阴影
可以使用效果稍差一些的替代方案吗？
- min-height: 100vh 用min-height: 800px
可以使用一些替代方案吗？
- opacity: 0.5 在IE下用filter : alpha(opacity=50)
可以使用JavaScript 让浏览器支持吗？
- 使用htmlshim.js 让IE6 ～ 8 支持新标签
- 使用DD_belatedPNg.js 让IE6 支持半透明png 图片
更换实现方式？

不同浏览器使用不同的样式

@supports
层叠
条件注释
浏览器怪癖

.container{
 display:flex
}
@supports(display: grid) {
  .container {
   display: grid;
   grid-template: repeat(4, 1fr) / 50px 100px;
  }
}

浏览器hack原理- 层叠

同一个属性，在后面书写的值覆盖前面书写的值

p {
 lihe-height:2;
 line-height:3;
}

(对浏览器)无效的属性值会被忽略

 p {
   display: table;
   display:flex;
 }

浏览器hack原理- 条件注释

只在IE下生效
    <!--[if IE]>
    这段文字只在IE浏览器显示
    <![endif]-->

    只在IE6下生效
    <!--[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]-->

    只在IE6以上版本生效
    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->

    只在IE8上不生效
    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->

    非IE浏览器生效
    <!--[if !IE]>
    这段文字只在非IE浏览器显示
    <![endif]-->

浏览器的怪癖

internet Explorer 6

/* IE6 不支持两个类选择器直接组合 */
.unused-clsss.selector{
  /* IE6 only CSS */
}
.container {
  height: 100px;
  /* 只有IE6 会忽略 */
  _height: 200px;
}

internet Explorer 7

.container {
 height : 100px;
 /* 只有IE6 和7 会忽略 */
 *height: 200px;
}

internet Explorer 8

/* IE6-8 不支持 :root 选择器 */
:root .selector {
 /* IE6-8 Style */
 }
 .selector {
   color: #fff;
   /* IE6-8 会忽略\9 */
   color: #fff\9
 }

.tip {
 background:blue;
 background:red\9;
 *background:black;
 _background:orange;
}

CSS2 选择器兼容性

主要兼容性问题在IE6-7 上

IE6 不支持多个类直接组合

p.class-a.class-b 被当成为p.class-b
解决方法：处理好选择器优先级

IE 不支持父子，兄弟选择器

E > F , E + F 和 E ~ F 选择器无效
解决方法避免使用，换后代选择器或其它

IE6 不支持属性选择器

任何一种都不支持
解决方法用class

IE6-7 不支持伪元素

不支持 :before 和 :after
解决办法，改变实现方式或在HTML中添加标签

IE6 不支持某些伪类

非链接不用使用:hover :active
解决办法使用a 嵌套 hover 的元素

IE6-7 不支持 :foucs 伪类

解决办法使用javaScript

IE6 不支持 :first-child 伪类

解决办法给第一个子元素添加 class = ‘first’

CSS3 选择器兼容性

CSS3 中的大部分选择器，兼容是IE9+
例如 :target :empty :nth-child :nth-of-type :checked :disabled 无法用IE6-8
移动端支持绝大多数CSS3 选择器

CSS2 属性

问题主要集中在IE6上，一部分IE7 也不支持

IE6 不支持 min/max-width/height

min-height 解决办法

div {
 min-height: 500px;
 _height : 500px;
}

min-width 解决办法

<div>
 <div class='container'>
   <div class='strut'></div>
 </div>
</div>
<style>
   .container {
   min-width: 500px;
  }
  /* IE6 */
  .container .strut {
   height:1px;
   width: 500px;
  }
 </style>

max-width/height 解决办法
- 使用javaScript

IE6 不支持position :fixed

html, body {
 height: 100%;
}
.go-top {
  position: fixed;
  _position:absolute;
  botton: 0;
  right: 0;
}

IE6-7不支持块级元素 inline-block

行级元素支持，而块级元素不支持
解决办法

.selector {
  display: inline-block;
  *display:line:
  *zoom :1 // 触发BFC
}

IE6-7 不支持 display：table

请使用float 或 inline-block
不要使用table

CSS3 属性

IE6-7 不支持
IE8 部分支持
IE9 基本都支持
IE8 支持
box-sizing
outline

IE8 不支持

background-size
推荐在IE8 及一下使用固定宽度布局
broder-radius
box-shadow
opacity
- filter:alpha(opacity=50)
rgba hsl hsla
- 一般场景下，使用想近的不透明颜色代替
- alpha 可以通过增加额外元素并设置透明度实现
- rem vh vw calc
- 降级为固定宽度

IE9 不支持

transition 与 animation
- 可以接受的降级
- 实现不能接受就用javaScript

media query

基本的媒体（all/print/screen/speech）都支持
媒体特性（width/height/orientation） IE9 及以上
- 还是建议IE8 及一下使用固定宽度布局

浏览器前缀

浏览器厂商为实验新特性，在属性名前加前缀
Chrome/Safari？Opera -webkit-
lMicrosoft :-ms-
Mozilla: -moz-

.example {
 -webkit-transform: translate(100px, 0);
     -ms-transform: translate(100px, 0);
         transform: translate(100px, 0) 
 }

Transform in IE

.selector {
 -webkit-transform : rotate(40deg) scale(2,0)
     -ms-transform : rotate(40deg) scale(2,0)
         transform : rotate(40deg) scale(2,0)
      filter:progid: DXimageTransform.Microsoft.Matrix(
  sizingMethod = 'auto expand',
  M11 = 1.5322222333,M12 = -1.2332333444,
  M21 = 1.2322222333,M23 = 1.5322222333
  )   
}

Transition

.example {
 -webkit-transfomr: translate(100px, 0);
     -ms-transform: translate(100px, 0);
         transform: translate(100px, 0);
 -webkit-transition: -webkit-transform .5s ease;
         transition: -webkit-transform .5s ease;
         transition: transform .5s ease;        
}

http://autoprefixer.github.io/ 自动添加前缀

Animation

语义化的html5标签

<style>
 article, mian, nav, aside, section, header, footer, figure, figcaption {
  display: block;
}
</style>

浏览器Bug

IE6 下半透明 png 显示不正常

DD_belatedPNG.js
filter

.selector{
background : url(/path/to/img.png) no-repeat;
_background: none;
/* 图片URL 必须是完整路径 */
_filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(
src='/path/to/img.png',
sizing<ethod='crop'
)
}

IE6 浮动双边距

浮动元素的与浮动同方向的边距加倍

.selector{
 float:left;
 /* IE6 下显示20px */
 margin-left:10px;

}

解决办法

.selector{
    float：left;
    margin-left:10px;
    _display: inline
}

hasLayout

On Having Layout
zoom: 1

IE 模式

浏览器模式Browser Mode
- 切换渲染引擎 JavaScript 引擎和HTTP 请求的UserAgent
- 兼容模式相当于使用IE7 的引擎
- 文本模式
切换文档模式，即渲染引擎和JavaScript 引擎

控制IE模式（<=10）
DocType 有无控制是否进入怪异模式
meta 标签控制进入那种文档模式

/* 使用IE7 渲染模式 */
<meta http-equiv='X-UA-Compatible' content='IE=7'>

/* 使用最新引擎 */

<meta http-equiv='X-ua-compatible' content='IE=edge'>

测试兼容性

虚拟机
https://www.browserstack.com/

Polyfill

使用代码帮助浏览器实现它尚未支持的特性
使用（未来）标准写法
CSS Polyffills
http://selectivizr.com/
http://css3pie.com/

爱lv行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫