资讯专栏INFORMATION COLUMN

简单记录个a标签点不上的bug

neuSnail / 1390人阅读

摘要:简单记录下问题官网页面移动端测试时,发现底部页脚的标签无论如何点不动。因为该标签不需要响应点击事件,所以直接加了句,问题解决。

官网改版时碰到的问题。简单记录下:

【 问题 】

官网index页面移动端测试时,发现底部页脚的a标签无论如何点不动。

【 Debug 过程 】

1、先是在pc端用浏览器模拟手机看了下,问题重现;

2、然后看了下“规则”和“计算后”面板(用的是FireFox,习惯了……分别对应Chrome的styles和computed),a标签本身的样式似乎是没问题的,周围也没啥问题……

3、丢到chrome里,问题依然重现,继续懵逼……

4、无意间关掉了移动端模拟,居然好了卧槽!!!(黑人问号脸.gif)继续懵逼……

5、试着用“选择元素”工具去点选a标签,居然点到了上边一个透明的空标签上(有宽高),试了几次都是如此(嗯?),然后检查发现该标签position: fixed;,移动端页面收缩后挤下来、整好遮挡住了a标签……至此找到原因。

6、因为该标签不需要响应点击事件,所以直接加了句pointer-events:none,问题解决。

【 小结 】

其实最开始应该先试下z-index的(个人有点排斥这个样式,都是自然写法),失策失策~~

不要随便写fixed的透明标签……血泪教训=_=|||……

无比怀念FireFox的3D模式……然并卵。以后只好用“选择元素”排除类似的bug了。

pointer-events:none真的是神器,省了很多js(其实是jq)“事件监听+选择器判断/过滤”的事。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115462.html

相关文章

  • 简单记录a标签点不上的bug

    摘要:简单记录下问题官网页面移动端测试时,发现底部页脚的标签无论如何点不动。因为该标签不需要响应点击事件,所以直接加了句,问题解决。 官网改版时碰到的问题。简单记录下: 【 问题 】 官网index页面移动端测试时,发现底部页脚的a标签无论如何点不动。 【 Debug 过程 】 1、先是在pc端用浏览器模拟手机看了下,问题重现; 2、然后看了下规则和计算后面板(用的是FireFox,习惯了...

    Cristalven 评论0 收藏0
  • 踩坑---一不是坑的难以言喻的坑,有关企业微信在iOS端上传文件的坑

    摘要:我们的业务代码是在自己的客户端微信钉钉企业微信四个地方跑的同一套代码。描述的具体描述是企业微信用户在使用上传图片时,无反应。 起因 今早一去公司,被组长远程发过来一个Bug,据说是用户反馈的一个iOS的问题,在我们的业务中,有一个有关图片上传的问题。我们的业务代码是在自己的客户端、微信、钉钉、企业微信四个地方跑的同一套代码。 Bug描述 Bug的具体描述是企业微信用户在使用上传图片时,...

    geekidentity 评论0 收藏0
  • 以太坊合约的安全性弱点,你都绕开了吗 III

    摘要:新年前,我们最后来谈一谈以太坊安全性的特点。以太坊使用了一个硬分叉解决了这一问题。合约拥有者利用函数的异常处理和调用栈大小限制进行攻击。结语通过这几期对参考文献的学习,我们看到了一些以太坊合约中设计的弱点。 新年前,我们最后来谈一谈以太坊安全性的特点。 不可能修改的bug 当合约公开在区块链上之后,它就不能去修改了。相应的,合约中出现的任何 bug 也没有机会改正。如果希望能够修改bu...

    qqlcbb 评论0 收藏0
  • 以太坊合约的安全性弱点,你都绕开了吗 III

    摘要:新年前,我们最后来谈一谈以太坊安全性的特点。以太坊使用了一个硬分叉解决了这一问题。合约拥有者利用函数的异常处理和调用栈大小限制进行攻击。结语通过这几期对参考文献的学习,我们看到了一些以太坊合约中设计的弱点。 新年前,我们最后来谈一谈以太坊安全性的特点。 不可能修改的bug 当合约公开在区块链上之后,它就不能去修改了。相应的,合约中出现的任何 bug 也没有机会改正。如果希望能够修改bu...

    gnehc 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<