隐藏文字：文字缩进或颜色：透明？

Question

我看到很多次尝试用CSS隐藏文本，例如：

<a class="back">back</a>    
a.back { text-indent: -9999px; display:block; width: 100px; height: 50px; background: url(/images/back.png); }

我总是想知道为什么不使用：

a.back { color: transparent; display:block; width: 100px; height: 50px; background: url(/images/back.png); }

在我看来语义上是正确的，此外，当我尝试文本缩进方法时，它在iPad显示中引起了一个错误：文本显示99999px留给锚标签并导致奇怪的不必要的水平滚动。 第二个代码是否存在常见的已知问题，或者可以使用？

Answer 1

font-size: 0px;应该做到这一点。 如果您想使按钮小于文字，您还需要添加line-height: 1em;或类似的内容。

Answer 2

使用 display 属性允许您在 C# 中编辑元素的状态。

以下是人们使用的 4 个主要显示元素：

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

display:none 表示相关标签根本不会出现在页面上（尽管您仍然可以通过 dom 与其交互）。其他标签之间不会为它分配空间。 visibility:hidden 表示与 display:none 不同，标签不可见，但在页面上为其分配了空间

但是如果您想了解更多关于它们的信息，您可以访问这个网站：https://www.w3schools.com/cssref/pr_class_display.asp

w3schools 以简单易懂的方式解释了许多语言。

Answer 3

不要隐藏内容并完全依赖背景图片。

HTML提供了一种方法，可以在无法显示图像的情况下（<img>属性）包含具有文本内容含义（alt元素）的图像。没有必要用样式表伪造它。

<a class="back"><img alt="back" src="/images/back.png"></a>    

图标是内容，值得这样对待。所有使用文本和背景图像的努力最终都是有限的。 <img>元素是为此用例设计的。