Safari浏览器兼容性问题

今天修改Chrome与Safari两端对css样式表现不一致的问题，做个记录以备后续查验。未来如果遇到相关工作，我都会做记录，并对这篇文章进行更新。
项目框架：Vue

问题一：safari的input标签，blur事件、focus事件不生效

解决方法：在change事件或者click事件里手动调用focus()方法

<input @change="change" @blur="myblur">

function change(e){
    e.target.focus() // 手动触发一下
    // ... (接下来处理其他逻辑)
}
function myblur(e){
    conosle.log('safari浏览器里，myblur方法没有被触发')
}

问题二：input输入框的默认大小及边框，Safari与Chrome表现不同；chrome会显示默认边框、背景色；

解决方法：给input标签设置初始状态样式

input {
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  /*尺寸根据业务需求，目的是保持两端一致*/
  width: 140px; 
  height: 14px;
}

问题三：table表格格式在safari里错乱

解决方法：设置table样式：

table {
  width: 100%;
  table-layout: fixed;
}

问题四：Monospaced Number字体在两端的表现不一致

原因：Monospaced Number字体在safari浏览器里不生效，系统将调用Safari默认字体。

解决方法：font-family 设置后备字体，目的是当font-family里指定的第一个字体不生效时，系统可以去调用第二个字体

font-family: "Monospaced Number", "PingFang-medium"

