Safari罕见BUG 数字在a标签下display:none;无效

2018-8-13 17:40 来自本站原创 9,901 4 6
[摘要]

笔者就在项目中发现一个非常罕见的BUG,某些数字在不规范的a标签中,在手机端Safari浏览器上会出现display:none;无效。

浏览器兼容性一直以来都是令前端工作人员头疼的一个问题,特别是当前浏览器品牌繁杂,各浏览器都有自己的一套渲染标准。很容易出现前端效果在各浏览器上无法统一,甚至出现BUG的情况。

笔者就在项目中发现一个非常罕见的BUG,某些数字在不规范的a标签中,在手机端Safari浏览器上会出现display:none;无效

Safari罕见BUG 数字在a标签下display:none;无效

看到上面一段描述,你大概是一脸懵逼,这说的都是什么啊,不要着急;我们用实际例子来描述这个BUG:

首先看一段html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a style="display: none;">我是文字1234567</a>
</body>
</html>

那么请问上述代码在浏览上会渲染出什么效果?

如果你有一些html知识,你肯定会答道:浏览器上什么都不会显示,因为唯一的一个元素a被设置了行内样式
display: none;也就是隐藏显示了嘛;

确实,上述html代码在浏览器上是毛都不会显示,但是如果是iPhone的safari上访问该代码页面则会出现非常有趣的画面,如下:

Safari罕见BUG 数字在a标签下display:none;无效

是不是发现什么异常了?文字被正常隐藏了,而数字却显示出来了。

而且笔者测试了多组数字,发现只有部分数字出现了这个bug,并未发现典型的规律。

1、以数字1开头的7位数字无法被隐藏,

2、以数字1开头的8位数字、9位数字正常隐藏,10-17位数字无法被隐藏,18位数字又正常隐藏...

由于笔者对数字没有过多研究,无法发现其中的规律,但safari上这个bug确实真实存在的了。

如何解决这个BUG?很简单:规范填写a标签

或许你已经发现,上述出现BUG的代码<a style="display: none;">我是文字1234567</a>中的a标签是不规范的,少了一个属性href,代码补全后上述BUG消失~

如果仅仅上使用a标签做一个元素,不需要跳转页面,我们可以使用href="javascript:void(0);"来阻止页面的跳转。

可能会有朋友会说,这么“刁钻”的情景不必在意,几乎不会遇到嘛!!但笔者就是在项目中遇到这个问题,刚好数字是1开头的7位数,而用a标签来特定元素,就遇到了这个蛋疼的问题。

如果你也恰巧遇到这个bug,不妨试下本文提供的方法。

本文最后更新于2018年8月14日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:4   其中:访客  0   博主  0
    加载中...
    1. 6年前 (2018-08-27) 0楼

      bug本来就是少数人能发现的

      • Wing
        6年前 (2018-08-28)  地下1层

        @钢网清洗机: 那倒是,要是大多数人都能发现的,就不是BUG,应该叫“错误”了 哈哈

    2. 6年前 (2018-08-21) 0楼

      看来还是写作不规范造成的,这么奇葩的BUG都被你发现了

    3. 6年前 (2018-08-21) 0楼

      所以隐藏不能写行内样式?

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 4 6 9,901
    Top