手机端点击＜li＞标签出现背景色的问题和解决方案

最新推荐文章于 2023-02-13 20:07:02 发布

三杯温开水

最新推荐文章于 2023-02-13 20:07:02 发布

阅读量709

点赞数

分类专栏：踩坑日志文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_47024018/article/details/122377434

版权

踩坑日志专栏收录该内容

17 篇文章 0 订阅

订阅专栏

博客讲述了在移动端开发中遇到的一个CSS问题，即在安卓和iOS设备上，tab栏切换时背景色显示不同。作者最初认为是:active伪类引起，但测试发现安卓设备上由于cursor:pointer样式导致，而iOS设备不受影响。解决方案是移除cursor:pointer样式，以避免在安卓上出现不必要的背景色。此问题提醒开发者注意不同平台的样式兼容性问题，避免过度推测和冗余代码。

摘要由CSDN通过智能技术生成

tab栏切换遇到的bug

当我们使用tab栏进行切换的时候，会出现一个背景色，起初我以为是CSS伪类事件:active所产生的，但是经过测试并非是这样的情况。在手机上(安卓手机和苹果手机)进行测试，发现安卓会出现这样的情况，而苹果手机不会出现这样的情况。看看问题图片：

当点击以后出现这样的情况：

在这里插入图片描述
CSS 样式代码：

ul li{
    width: 100%;
    list-style: none;
    text-align: center;
    justify-content: space-between;
    float: left;
    font-size: 0.3em;
    color: #666;
    /* 出现该bug的罪魁祸首 cursor */
    cursor: pointer;
    padding-top: 8px;
}

ul li:active {
    color: #75b5d1;
    background-color: #ddecff !important;
}

经过分析和调试发现，苹果系统是不支持cursor: pointer;这个样式的，所以点击切换的时候不会出现上述图片的情况，安卓则会出现，因为想到该项目可能会存在浏览器中进行预览，为了美观一点所以我添加了这个cursor: pointer;样式，最后把这个删除了，就不会出现这样的情况了。希望大家在解决问题的时候不要向我这样存在画蛇添足的情况！还是不要太根据自己的想想去写代码，不然自己就是一个BUG制造机了…