ios系统对于table标签的特殊样式错误

背景

本来我都很少用table标签了。直接div+flex一把梭。但是这次的需求是更新别人的页面，别人用的table，我也就跟着一起用了

ui图

能看出当前司机师傅在排行榜中的显示样式与其他司机师傅有明显区别

主要区别是：

字体大小改变，字体颜色改变，有一个背景图，姓名改成 我

假如当前司机师傅是排在前三名，奖牌icon大小也要跟着变

初想：

老项目使用的是Table表格，本次也就跟着老项目编写

一行为一个tr，其中包括了四个td，给当前选中的tr加一个active，在active中给本行加一个背景图，并且改变本行的字体样式

结果

需求解决，在android机和浏览器上完美运行。

但是临近上线时，测试发现，在ios机上会出现样式错误：给tr加的背景图，会给每个td加上，也就代表着，有了四张背景图

原因

问题是ios对table表格的特殊处理

最后的处理办法

最后的处理办法是规避此问题

设置一个空的div，给他加上背景图，将它放在第一行，然后通过判断当前的active距离顶部距离，来动态定位到当前active

需要使用z-index来设置上下层

思考

使用一些HTML的原始标签的时候，要考虑他本身自带的样式，更要考虑不同的环境是否对这个标签做了特殊处理。最好的办法是使用div，因为在 HTML 规范中，