Why Google Tag Manager puts both display:none AND

问题:

If you take a look at the <noscript> part of the Google Tag Manager embed code, you'll notice something like:

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

I can understand why style="display:none" would be important (it will hide the element such that it takes up zero space in the layout and yet still fetches the content) however, why add the "visibility:hidden" part? It seems to me like it adds no additional value, so I'm assuming there must be some edge case or legacy or mobile browser that doesn't behave correctly without it.

Anyone know about this?

回答1:

Could be a thing to make sure screenreaders don't ever tell anyone about it. Looks like some people have found this to be problematic otherwise over here: http://juicystudio.com/article/screen-readers-display-none.php#comment3

I haven't tested this, so I can't confirm any of it, but layout-wise it should not make any differences as display:none instructs to remove the element from the layout all together, so making it invisible doesn't change anything.