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

王小优
王小优
王小优
231
文章
0
评论
2015年12月11日
评论
4,921 1066字阅读3分33秒

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

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

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

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

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

首先看一段HTML代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <a style="display: none;">我是文字1234567</a>
  9. </body>
  10. </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,不妨试下本文提供的方法。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
解决IE7下设置float:right时元素自动换行异常情况 HTML

解决IE7下设置float:right时元素自动换行异常情况

E7浏览器下,本该并排显示的块状元素,添加了float:right属性后,浮动元素自动换行了,本文介绍解决办法。 不得不说IE是个让人又爱又恨的产品,对于前端开发者来说,IE系列版本的兼容性问题最令人...
HTML中引入CSS的四种常用方法及各自的缺点 CSS

HTML中引入CSS的四种常用方法及各自的缺点

在WEB前端开发中最基本是就是HTML+CSS了,HTML就好比是骨架,CSS就是皮肉,那么你知道在HTML中引入CSS有哪些方法以及各自的缺点么? 在WEB前端开发中最基本是就是HTML+CSS了,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: