为什么 Google 跟踪代码管理器会将 display:none 和 visibility:hidden 都放在 iframe 上？答案

【问题标题】：Why Google Tag Manager puts both display:none AND visibility:hidden on iframe?为什么 Google 跟踪代码管理器会将 display:none 和 visibility:hidden 都放在 iframe 上？
【发布时间】：2015-06-02 23:16:10
【问题描述】：

如果您查看 Google 跟踪代码管理器嵌入代码的 <noscript> 部分，您会注意到类似以下内容：

<noscript><iframe style="display:none;visibility:hidden" src="//www.googletagmanager.com/..." height="0" width="0"></iframe></noscript>

我可以理解为什么 style="display:none" 很重要（它会隐藏元素，使其在布局中占用零空间但仍会获取内容）但是，为什么要添加“visibility:hidden”部分？在我看来，它没有增加任何额外价值，所以我假设一定有一些边缘案例或旧版或移动浏览器在没有它的情况下无法正常运行。

有人知道吗？

【问题讨论】：

标签： html css iframe google-tag-manager

【解决方案1】：

可以确保屏幕阅读器永远不会告诉任何人这件事。看起来有些人发现这有问题，否则在这里：http://juicystudio.com/article/screen-readers-display-none.php#comment3

我没有测试过这个，所以我不能确认任何一个，但是布局方面它不应该有任何区别，因为 display:none 指示从布局中删除元素，所以让它不可见不要改变任何东西。

【讨论】：

您的链接似乎可以回答这个问题。从我第一次阅读它开始，我收集到一些屏幕阅读器会跳过带有display:none 的元素，而另一些则会跳过带有visibility:hidden 的元素，但是添加两者都会让所有屏幕阅读器忽略该元素。你也是这么理解的吗？
是的，这也是我收集到的。我同意 cmets，只需 display:none 就足够了，但是，你总是要适应现实。