前言

---

记录一下vue+html5项目在safari浏览器的各种奇怪的兼容问题和坑。

都是在safari 浏览器出现的坑(pc端)

一，el-input-number计数器在safari浏览器下点击左右加减按钮时会出现浅蓝色或者灰色背景块，(之前在网上找的那些什么类似于-webkit-tap-highlight-color: transparent;这样的解决方案都试过了，都没有用)，所以目前还未找到解决方案。

注：element-ui官方文档在safari浏览器也会出现这种情况。

safari.png

二，el-collapse折叠面板在safari浏览器，连续点击多次就会出现多出来的三条线，如下图所示

elcalise.png

一开始还以为是element-ui的bug,思维就是固定在element-ui上，后来实在没办法就自己写了一个
详情请看vue 折叠面板效果折腾小记,但是还是有这个问题，在其他浏览器就没问题，然后我就想把颜色值改为红色试一下，果然没有了，这样就得出结论是我颜色值的问题

刚开始我是这么写的

border-bottom: 1px solid rgba(112, 112, 112, 0.2);

然后改成这样写就好了

border: 1px solid #e2e2e2;

故而得出结论，safari浏览器上写rgba格式的颜色值有问题，兼容性不是很好，所以建议尽量使用十六进制颜色值。

三，safari浏览器对mouseenter,mouseleave事件不是很友好，如果一个区块内有多个mouseenter事件在谷歌浏览器就很平滑过渡，但是在safari浏览器就会一直闪烁，解决办法就是把离开事件mouseleave事件放到最外层，直至离开最外层的model时才处理事件的隐藏显示。

四， safari浏览器的字体，字间距，普遍要比chrome的字体大

很常见的问题就是，在项目中写了固定宽的容器，字体大小，在chrome浏览器表现正常，在safari浏览器就会溢出，换行之类的，所以要调整容器宽度或者字体大小来适配safari浏览器。