Css MobileSafari中有3列3行HTML表格，但在Chrome和Firefox中效果良好 Chrome和Firefox

IOS 14上的移动Safari

Z-index

似乎被忽略，似乎

伪元素

没有正确地锚定到

tbody

元素上，并延伸到它们的父元素之外

什么可以调整，使移动Safari的行为类似于Chrome和Firefox？我使用

伪元素

来模拟重叠表行的外观。如果不用那些

伪元素

就可以实现这种外观，那么这也是一个适合我的解决方案

th:第一个孩子，tbody td:第一个孩子{
边框左上半径：1.5雷姆；
}
th:最后一个孩子，tbody td:最后一个孩子{
边界右上角半径：1.5雷姆；
}
t车身，t车身总成{
位置：相对位置；
z指数：10；
变换：比例（1）；
}
tbody td{
背景色：#333；
}
tbody td:第一个孩子，tfoot td:第一个孩子{
边界左下半径：1.5雷姆；
}
tbody td:最后一个孩子，tfoot td:最后一个孩子{
边框右下半径：1.5雷姆；
}
tbody:：before，tbody:：after{
位置：绝对位置；
z指数：-10；
顶部：0；右侧：0；底部：50%；左侧：0；
背景色：#222；
内容：“；
}
之后{
顶部：50%；右侧：0；底部：0；左侧：0；
背景色：#444；
}
tfoot td{背景色：#444；}

html，table，p{
保证金：0；
填充：0！重要；
颜色：#ddd；
}
html{
字体系列：Arial；
文本对齐：居中；
文本转换：大写；
}
表，th，td{
填充：1rem；
边界间距：0；
}
thead th{
背景色：#222；
}
th{文本转换：大写；}
td{边框底部：实心#222；}
一个
两个
三个

四个
五个
六个

七个
八个
九个

在Safari中如何呈现

tbody

元素似乎是个问题

完全去除

伪元素

，而是使用

线性渐变

，在表单元格后面的

表

元素上设置硬挡，似乎可以提供与桌面浏览器相同的结果，而在Mobile Safari中没有任何问题

th:第一个孩子，tbody td:第一个孩子{
边框左上半径：1.5雷姆；
}
th:最后一个孩子，tbody td:最后一个孩子{
边界右上角半径：1.5雷姆；
}
t车身，t车身总成{
位置：相对位置；
z指数：10；
变换：比例（1）；
}
tbody td{
背景色：#333；
}
tbody td:第一个孩子，tfoot td:第一个孩子{
边界左下半径：1.5雷姆；
}
tbody td:最后一个孩子，tfoot td:最后一个孩子{
边框右下半径：1.5雷姆；
}
tfoot td{背景色：#444；}
桌子{
背景图像：
线性梯度（
透明30%，#222 30%50%，#444 50%70%，透明70%100%
);
}

html，table，p{
保证金：0；
填充：0！重要；
颜色：#ddd；
}
html{
字体系列：Arial；
文本对齐：居中；
文本转换：大写；
}
表，th，td{
填充：1rem；
边界间距：0；
}
thead th{
背景色：#222；
}
th{文本转换：大写；}
td{边框底部：实心#222；}
一个
两个
三个

四个
五个
六个

七个
八个
九个