safari 遇到的坑

虽然Safari和chrome的内核都是 webkit 内核，但是两个浏览器还是有一些细微的差别，这次项目中遇到了一些，就在这里记录一下，避免下次再遇见。后面再遇见新的问题，会继续更新。

一、获取时间戳的问题

解决： 必须将时间格式转换成 YYYY/MM/DD 才能获取到，否则会得到 Invalid Date

二、关于MP4的问题

Safari浏览器下不能播放MP4的视频

解决：使用element-ui 默认的上传组件并且设置accept="video/*"之后，会自动将.mp4后缀的视频设置为不可选（不能上传mp4），所以设置为accept="video/*, .mp4"，这样就可以正常上传.mp4视频

<el-upload class="iworku-upload-video video"
       :action="GLOBAL.qiniuURL"
       accept="video/*, .mp4" 
       :before-upload="onBeforeUpload"
       :on-success="onSuccessUpload"
       :on-error="onErrorUpload"
       :data="uploadData"
       :show-file-list="false">
</el-upload>
<!-- 这样才能在Safari浏览器中上传.mp4 后缀的视频 -->

三、::before、::after 里面设置cursor: pointer; 不可用

如标题所见，在 ::before、::after 伪类元素里面设置 cursor:pointer，在Safari浏览器是是不会出现 ， 而是使用默认箭头图标

解决：在该元素的非伪类元素下设置cursor:pointer;

// css 代码
.chat {
	cursor: pointer;   // 正确代码
}

.chat::before {
	content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background: url("~assets/images/public/chat.png") no-repeat;
    cursor: pointer; // 这句代码在Safari浏览器下不起任何作用
}

<!--  html 代码 -->
<i class="chat">显示聊天图标</i>