HTML5和css3新特性 === 前端常见浏览器兼容性问题解决方案

浅浅的花香味﹌ 2022-12-26 10:27 156阅读 0赞

# HTML5和css3新特性 #

## css3新特性 ##

### 1、选择器 ###

### 2、背景和边框 ###

### 3、文本效果 ###

### 4、2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation) ###

#### 1. 选择器 ####

##### 常规选择器： #####

:last-child /* 选择元素最后一个孩子 */
    :first-child /* 选择元素第一个孩子 */
    :nth-child(1) /* 按照第几个孩子给它设置样式 */
    :nth-child(even) /* 按照偶数 */
    :nth-child(odd)  /* 按照奇数 */
    :disabled /* 选择每个禁用的dom元素 */
    :checked /* 选择每个被选中的dom元素 */
    :not(selector) /* 选择非 selector 元素的每个元素 */
    ::selection /* 选择被用户选取的元素部分 */

###### 伪类和伪元素： ######

###### `根本区别在于它们是否创造了新的元素（抽象）` ######

###### 伪类：用于向某些选择器添加特殊的效果（没有创建新元素） ######

:last-child /* 选择元素最后一个孩子 */
    :first-child /* 选择元素第一个孩子 */
    :nth-child(1) /* 按照第几个孩子给它设置样式 */
    a:link { color: #FF0000} /* 未访问的链接 */
    a:visited { color: #00FF00} /* 已访问的链接 */
    a:hover { color: #FF00FF} /* 鼠标移动到链接上 */
    a:active { color: #0000FF} /* 选定的链接 */

##### 伪元素：创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器 #####

::before { } /* 选择器在被选元素的前面插入内容和定义css， 使用 content 属性来指定要插入的内容。 */
    ::after { } /* 选择器在被选元素的后面插入内容和定义css， 使用 content 属性来指定要插入的内容。 */
    :first-letter /* 选择该元素内容的首字母 */
    :first-line /* 选择该元素内容的首行 */
    ::selection /* 选择被用户选取的元素部分 */

#### 2. 背景和边框 ####

#### 背景： ####

> background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）  
> background-origin：规定背景图片的定位区域 对于 background-origin 属性，有如下属性 背景图片可以放置于  
> content-box、padding-box 或 border-box 区域

##### 边框： #####

> border-radius：圆角  
> box-shadow / text-shadow：阴影  
> border-image：边框图片

#### 3. 文本效果 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text-shadow</td> 
   <td>向文本添加阴影</td> 
  </tr> 
  <tr> 
   <td>text-justify</td> 
   <td>规定当 text-align 设置为 “justify” 时所使用的对齐方法</td> 
  </tr> 
  <tr> 
   <td>text-emphasis</td> 
   <td>向元素的文本应用重点标记以及重点标记的前景色</td> 
  </tr> 
  <tr> 
   <td>text-outline</td> 
   <td>规定文本的轮廓</td> 
  </tr> 
  <tr> 
   <td>text-overflow</td> 
   <td>规定当文本溢出包含元素时发生的事情</td> 
  </tr> 
  <tr> 
   <td>text-wrap</td> 
   <td>规定文本的换行规则</td> 
  </tr> 
  <tr> 
   <td>word-break</td> 
   <td>规定非中日韩文本的换行规则</td> 
  </tr> 
  <tr> 
   <td>word-wrap</td> 
   <td>允许对长的不可分割的单词进行分割并换行到下一行</td> 
  </tr> 
  <tr> 
   <td>text-decoration</td> 
   <td>文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线</td> 
  </tr> 
 </tbody> 
</table>

*  ###### @font-face 自定义字体 ######
 *  ###### 渐变，CSS3新增了渐变效果，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变) ######

##### 变形transform #####

###### 变形有rotate旋转、scale缩放、translate位移、skew倾斜 ######

###### 过渡transition ######

###### 过渡transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值 ######

###### 一般写在一起： ######

div
    { 
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
    }

##### 动画animation #####

###### 动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用 ######

.myClass { 
    	-webkit-animation-name: fadeIn;
    	-moz-animation-name: fadeIn;
    	-o-animation-name: fadeIn;
    	-ms-animation-name: fadeIn;
    	animation-name: fadeIn;  /* 不带前缀的放到最后 */
    }
    /* 复杂属性 keyframes */
    @-webkit-keyframes fadeIn { 
    	0% {  opacity: 0; } 100% {  opacity: 0; }
    }
    @-moz-keyframes fadeIn { 
    	0% {  opacity: 0; } 100% {  opacity: 0; }
    }
    @-o-keyframes fadeIn { 
    	0% {  opacity: 0; } 100% {  opacity: 0; }
    }
    @-ms-keyframes fadeIn { 
    	0% {  opacity: 0; } 100% {  opacity: 0; }
    }
    /* 不带前缀的放到最后 */
    @keyframes fadeIn { 
    	0% {  opacity: 0; } 100% {  opacity: 0; }
    }

> 这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）

### H5 新特性 ###

#### 1. h5新增特性： ####

> 语义化标签：header、footer、section、nav、aside、article  
> 增强型表单：input 的多个 type  
> 新增表单属性：placehoder、required、min 和 max  
> 音频视频：audio、video  
> canvas 画布  
> 地理定位  
> 拖拽  
> 本地存储：  
> localStorage 没有时间限制的数据存储；  
> sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除  
> 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause  
> WebSocket：建立持久通信协议

#### 2. 语义化标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>header</td> 
   <td>定义了文档的头部区域</td> 
  </tr> 
  <tr> 
   <td>footer</td> 
   <td>定义了文档的尾部区域</td> 
  </tr> 
  <tr> 
   <td>nav</td> 
   <td>定义文档的导航</td> 
  </tr> 
  <tr> 
   <td>section</td> 
   <td>定义文档中的节（section、区段）</td> 
  </tr> 
  <tr> 
   <td>article</td> 
   <td>定义页面独立的内容区域</td> 
  </tr> 
  <tr> 
   <td>aside</td> 
   <td>定义页面的侧边栏内容</td> 
  </tr> 
  <tr> 
   <td>dialog</td> 
   <td>定义对话框，比如提示框</td> 
  </tr> 
 </tbody> 
</table>

#### 3. 表单类型增强 ####

> HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

<table> 
 <thead> 
  <tr> 
   <th>input 的 type</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>从一个日期选择器选择一个日期</td> 
  </tr> 
  <tr> 
   <td>datetime 选择一个日期（UTC 时间）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>email</td> 
   <td>包含 e-mail 地址的输入域</td> 
  </tr> 
  <tr> 
   <td>month</td> 
   <td>选择一个月份</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>数值的输入域</td> 
  </tr> 
  <tr> 
   <td>range</td> 
   <td>一定范围内数字值的输入域</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>用于搜索域</td> 
  </tr> 
  <tr> 
   <td>tel</td> 
   <td>定义输入电话号码字段</td> 
  </tr> 
  <tr> 
   <td>time</td> 
   <td>选择一个时间</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>URL 地址的输入域</td> 
  </tr> 
 </tbody> 
</table>

###### week选择周和年 ######

#### 4. html5 新增的表单属性 ####

<table> 
 <thead> 
  <tr> 
   <th>表单属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>placehoder</td> 
   <td>简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td>是一个 boolean 属性。要求填写的输入域不能为空</td> 
  </tr> 
  <tr> 
   <td>pattern</td> 
   <td>描述了一个正则表达式用于验证 input 元素的值</td> 
  </tr> 
  <tr> 
   <td>min 和 max</td> 
   <td>设置元素最小值与最大值</td> 
  </tr> 
  <tr> 
   <td>step</td> 
   <td>为输入域规定合法的数字间隔</td> 
  </tr> 
  <tr> 
   <td>height 和 width</td> 
   <td>用于 image 类型的 input 标签的图像高度和宽度</td> 
  </tr> 
  <tr> 
   <td>autofocus</td> 
   <td>是一个 boolean 属性。规定在页面加载时，域自动地获得焦点</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>是一个 boolean 属性。规定 input 元素中可选择多个值</td> 
  </tr> 
 </tbody> 
</table>

#### 5. html5 新事件 ####

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onresize</td> 
   <td>当调整窗口大小时触发</td> 
  </tr> 
  <tr> 
   <td>ondrag</td> 
   <td>当拖动元素时触发</td> 
  </tr> 
  <tr> 
   <td>onscroll</td> 
   <td>当滚动元素滚动元素的滚动条时触发</td> 
  </tr> 
  <tr> 
   <td>onmousewheel</td> 
   <td>当转动鼠标滚轮时触发</td> 
  </tr> 
  <tr> 
   <td>onerror</td> 
   <td>当错误发生时触发</td> 
  </tr> 
  <tr> 
   <td>onplay</td> 
   <td>当媒介数据将要开始播放时触发</td> 
  </tr> 
  <tr> 
   <td>onpause</td> 
   <td>当媒介数据暂停时触发</td> 
  </tr> 
 </tbody> 
</table>

# 前端常见浏览器兼容性问题解决方案 #

## 前言： ##

> 不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。  
> 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎  
> 所以浏览器兼容性问题一般指：css兼容、js兼容

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>内核（渲染引擎）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Chrome谷歌</td> 
   <td>之前Webkit，已改Blink内核</td> 
  </tr> 
  <tr> 
   <td>FireFox火狐</td> 
   <td>Gecko</td> 
  </tr> 
  <tr> 
   <td>Safari苹果</td> 
   <td>Webkit</td> 
  </tr> 
  <tr> 
   <td>IE</td> 
   <td>Trident</td> 
  </tr> 
  <tr> 
   <td>Opera欧朋</td> 
   <td>现已改用Google Chrome的Blink内核</td> 
  </tr> 
 </tbody> 
</table>

### 1. 不同浏览器的标签默认的margin和padding不同 ###

##### 问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 #####

###### 碰到频率: 100% ######

##### 解决方案： #####

###### CSS里 `*{margin:0;padding:0;}` 但是性能不好 ######

###### 一般我们会引入reset.css样式重置； ######

###### 备注： 这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。 ######

### 2. css3新属性，加浏览器前缀兼容早期浏览器 ###

> `-moz-` /\* 火狐浏览器 /  
> `-webkit-` / Safari,谷歌浏览器等使用Webkit引擎的浏览器 /  
> `-o-` / Opera浏览器(早期) /  
> `-ms-` / IE \*/\`

##### 哪些css3属性需要加： #####

定义关键帧动画 @keyframes
    css3中的变形（transform）、过渡(transtion)、动画(animation)
    border-radius 圆角
    box-shadow  盒子阴影
    flex  弹性布局
    ....

##### 使用： #####

##### 3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题 #####

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

###### 解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; ######

<divid=”imfloat”>
    相应的css为
    # imfloat{ 
    float:left;
    margin:5px;//IE下理解为10px
    display:inline;//IE下再理解为5px}

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

##### 4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度 #####

###### 问题症状： 设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px. ######

###### 碰到频率： 60% ######

###### 解决方案： ######

###### 给超出高度的标签设置overflow:hidden; ######

###### 或者设置行高line-height 小于你设置的高度。 ######

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

##### 5. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug #####

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

###### 碰到几率： 20% ######

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

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

##### 6. IE浏览器div最小宽度和高度的问题 #####

###### 问题症状： IE浏览器div最小宽度和高度不生效 ######

###### IE不认得`min-`这个定义，但实际上它把正常的`width`和`height`当作有`min`的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用`min-width`和`min-height`的话，IE下面根本等于没有设置宽度和高度。 ######

###### 比如要设置背景图片，这个最小宽度是比较重要的。要解决这个问题，可以这样： ######

#box{ 
      width: 80px;
      height: 35px;
      }
    html>body #box{ 
     width: auto;
     height: auto; 
     min-width: 80px; 
     min-height: 35px;
     }

##### 7. 超链接访问过后hover样式就不出现的问题 #####

###### 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序`L-V-H-A` ######

##### Code: #####

##### 8. 图片默认有间距 #####

###### 问题症状： 几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。 ######

###### 碰到几率： 20% ######

###### 解决方案： 使用float属性为img布局(所有图片左浮) ######

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

##### 9. css hack解决浏览器兼容性 #####

###### 不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。 ######

###### 下面是css hack写法： ######

background-color:yellow0; 0 是留给ie8的
    +background-color:pink;   + ie7定了；
    _background-color:orange; _专门留给神奇的ie6；

## 二、js兼容 ##

### 1. 事件绑定 ###

###### IE:`dom.attachEvent();` ######

###### 标准浏览器： `dom.addEventListener(‘click',function(event){},false);` ######

###### 标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值默认false，表示事件冒泡方式。 ######

###### 如果浏览器不支持`addEventListener()`方法, 你可以使用 `attachEvent()`方法替代。 ######

###### 以下实例演示了跨浏览器的解决方法： ######

var x = document.getElementById("myBtn");
    if (x.addEventListener) {    //所有主流浏览器，ie9+
        x.addEventListener("click", myFunction);
    } else if (x.attachEvent) {       // IE 8 及更早 IE 版本
        x.attachEvent("onclick", myFunction);
    }

### 2. event事件对象问题 ###

### 2. event.srcElement(事件源对象)问题 ###

###### IE：`event`对象有`srcElement`属性，但是没有`target`属性； ######

###### Firefox: `event`对象有`target`属性，但是没有`srcElement`属性。 ######

###### 解决方法： ######

srcObj = event.srcElement?event.srcElement:event.target;

### 3. 获取元素的非行间样式值： ###

###### IE: dom.currentStyle\[‘width’\] 获取元素高度 ######

###### 标准浏览器：`window.getComputedStyle(obj, null)['width'];` ######

###### 跨浏览器兼容解决方法： ######

// 获取元素属性值的兼容写法
      function getStyle(obj,attr){ 
          if(obj.currentStyle){ 
             //兼容IE
     　　　　　　obj.currentStyle[attr];
              return obj.currentStyle[attr];
          }else{ 
             //非IE，
     　　　　return window.getComputedStyle(obj, null)[attr]; 
     　    }
     　 }

### 4. 阻止事件冒泡传播： ###

//js阻止事件传播，这里使用click事件为例
        document.onclick=function(e){ 
            var e=e||window.event;
            if (e.stopPropagation) { 
                e.stopPropagation();//W3C标准
            }else{ 
                e.cancelBubble=true;//IE....
            }
        }

### 5. 阻止事件默认行为： ###

//js阻止默认事件 一般阻止a链接href，form表单submit提交
        document.onclick=function(e){ 
            var e=e||window.event;
            if (e.preventDefault) { 
                e.preventDefault();//W3C标准
            }else{ 
                e.returnValue='false';//IE..
            }
        }

### 6. ajax兼容问题 ###

###### IE： ActiveXObject ######

###### 其他： xmlHttpReuest ######

> 在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()

##### 跨浏览器兼容解决方法： #####

#### 看更多面试题，[请点击][Link 1] ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

[Link 1]: https://blog.csdn.net/weixin_43638968/article/details/107518108
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/13797e9e4e6346068ee190c51048539b.png