element safari浏览器兼容问题

最新推荐文章于 2024-07-30 17:30:40 发布

唐月123456

最新推荐文章于 2024-07-30 17:30:40 发布

阅读量703

点赞数

CC 4.0 BY-SA版权

文章标签： safari 前端 elementui

本文链接：https://blog.youkuaiyun.com/weixin_39054337/article/details/131417070

文章详细描述了在Safari浏览器下，3D变换会导致忽略z-index层叠顺序的问题，并提供了针对表格布局和兼容性的一系列CSS解决方案，包括调整table-cell显示、固定宽度、隐藏溢出等，以确保在Safari中正确渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

App.vue 或者 src/styles/index.scss文件下

<style lang="scss">
body .el-table th.gutter {
  display: table-cell !important;
}

body .el-table colgroup.gutter {
  display: table-cell !important;
}

table {
  width: 100% !important;
}

.el-table__body {
  // 使表格兼容safari，不错位
  width: 100%;
  table-layout: fixed !important;
  overflow: hidden !important // table fixed 错位问题处理
}

.el-table > .el-table__fixed-right {
  height: 100% !important;
  right: -1px;
  border-right: 1px solid #d8d8d8;
}
// 表格边框缺失问题：其实是表格线条颜色加深问题，无法识别
.el-table__fixed::before,
.el-table__fixed-right::before {
  background-color: #d8d8d8;
}

// 缩放错位：
body .el-table th.gutter {
  display: table-cell !important;
}
body .el-table colgroup.gutter {
  display: table-cell !important;
}
//  表格与内容变形
body .el-table--border th.gutter:last-of-type {
  display: block !important;
  width: 17px !important;
}

body table {
  width: 100% !important;
}
// 使表格兼容safari，不错位
body .el-table__body {
  width: 100%;
  table-layout: fixed !important;
  overflow: hidden !important // table fixed 错位问题处理
}
</style>

Safari 3D变换会忽略z-index的层级

在Safari浏览器下，包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。