笔者就在项目中发现一个非常罕见的BUG，某些数字在不规范的a标签中，在手机端Safari浏览器上会出现display:none;无效。
浏览器兼容性一直以来都是令前端工作人员头疼的一个问题，特别是当前浏览器品牌繁杂，各浏览器都有自己的一套渲染标准。很容易出现前端效果在各浏览器上无法统一，甚至出现BUG的情况。
笔者就在项目中发现一个非常罕见的BUG，某些数字在不规范的a标签中，在手机端Safari浏览器上会出现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上访问该代码页面则会出现非常有趣的画面，如下：
是不是发现什么异常了？文字被正常隐藏了，而数字却显示出来了。
而且笔者测试了多组数字，发现只有部分数字出现了这个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，不妨试下本文提供的方法。
粤公网安备 44040402000065号
bug本来就是少数人能发现的
@钢网清洗机： 那倒是，要是大多数人都能发现的，就不是BUG，应该叫“错误”了 哈哈
看来还是写作不规范造成的，这么奇葩的BUG都被你发现了
所以隐藏不能写行内样式？