码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-03-25 13:29:44      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:改版   computed   pointer   应该   手机   怀念   pos   article   index   

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

【 问题 】

官网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)“事件监听+选择器判断/过滤”的事。

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

标签:改版   computed   pointer   应该   手机   怀念   pos   article   index   

原文地址:https://www.cnblogs.com/jlfw/p/12565505.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!