el-table 不兼容 safari浏览器（version ＜ 17.5）

elemnet-ui、element-plus 的 el-table 在 safari浏览器（version < 17.5） 下均存在 表头和表体错位 的问题。

• 解决问题

.el-table__body {
  width: 100%;
  // 使表格兼容safari，修复错位
  table-layout: fixed !important;
}

table-layout 属性

定义：用来显示表格单元格、行、列的算法规则。

用法规则：

值	说明
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

• 判断该版本浏览器

// safari获取浏览器版本
function getBrowserVersion() {
  const safariVersionRegex = /Version\/(\d+(\.\d+)?)/
 
  const match = navigator.userAgent.match(safariVersionRegex)
  if (match && match[1]) {
    return +match[1]
  }
  return NaN
}
 
// 是否是safari浏览器
function isSafari() {
  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
}
 
 
const isUnder17Safari = isSafari() && getBrowserVersion() < 17.5