使用一些HTML的原始标签的时候,要考虑他本身自带的样式,更要考虑不同的环境是否对这个标签做了特殊处理。最好的办法是使用div,因为在 HTML 规范中,
元素是一个空元素,它本身并不会包含任何内容或默认样式,只是一种常见的块级容器元素。但是不同的浏览器可能会对
做一些不同的特殊处理
直接上干货
ui图
能看出当前司机师傅在排行榜中的显示样式与其他司机师傅有明显区别
主要区别是:
字体大小改变,字体颜色改变,有一个背景图,姓名改成 我
假如当前司机师傅是排在前三名,奖牌icon大小也要跟着变
初想:
老项目使用的是Table表格,本次也就跟着老项目编写
一行为一个tr,其中包括了四个td,给当前选中的tr加一个active,在active中给本行加一个背景图,并且改变本行的字体样式
结果
需求解决,在android机和浏览器上完美运行。
但是临近上线时,测试发现,在ios机上会出现样式错误:给tr加的背景图,会给每个td加上,也就代表着,有了四张背景图
原因
问题是ios对table表格的特殊处理
最后的处理办法
最后的处理办法是规避此问题
设置一个空的div,给他加上背景图,将它放在第一行,然后通过判断当前的active距离顶部距离,来动态定位到当前active
需要使用z-index来设置上下层
-------------本文结束感谢您的阅读-------------
技术原创:姚渐新,您的支持将鼓励我继续创作
- 本文链接: http://example.com/2023/09/19/ios系统对于table的特殊样式错误/
- 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!