element UI框架el-table表格不兼容safari浏览器(17.5版本以前有这个问题),因此表头thead和表体tbody存在错位问题。
一解决:
.el-table__body {
width: 100%;
// 使表格兼容safari,不错位
table-layout: fixed !important;
}
table-layout 属性
- 定义和用法
tableLayout 属性用来显示表格单元格、行、列的算法规则。
- 可能的值
值 | 描述 |
---|---|
automatic | 默认。列宽度由单元格内容设定。 |
fixed | 列宽由表格宽度和列宽度设定。 |
inherit | 规定应该从父元素继承 table-layout 属性的值。 |
============================
二判断是safira浏览器
// safari获取浏览器版本
export function getBrowserVersion() {
const safariVersionRegex = /Version\/(\d+(\.\d+)?)/
const match = navigator.userAgent.match(safariVersionRegex)
if (match && match[1]) {
return +match[1]
}
return NaN
}
// 是否是safari浏览器
export function isSafari() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
}
import { getBrowserVersion, isSafari } from "@/utils/index"
const isUnder17Safari = computed(() => isSafari() && getBrowserVersion() < 17.5)