慎用text-indent的负值

为了语义化，咱们可能会利用图片替换文字的方式来给咱们的站点增色，举个栗子：

<p>文字文字</p>

        p {
            text-indent: -2500px;        // 小，在高分辨率宽屏下文字隐藏失败
            //text-indent: -99999px;     // 大，但可能存在性能问题，甚至被搜索引擎屏蔽
            background: url(logo.png);
        }

这段代码中咱们但愿隐藏文字，提高 SEO，因此使用 logo.png 这个图片进行替换，这时会对文字设置一个负缩进值。

这里的 -2500px 在之前基本能够解决隐藏文字的问题，但目前发现高分辨率浏览器下这个值已经在浏览器可视范围内了，形成文字隐藏失败的问题。

而若是将这个值设置为更大，如 -99999px 时，又会形成浏览器的性能问题：浏览器须要生成一个宽度为 99999px 的盒模型，因此也要限制这个值的大小。

还有人指出，很多人滥用这个属性为了提高 SEO ，而搜索引擎可能会反过来屏蔽这里的文字。

除此以外，在从右到左读的语言环境中，这个负值可能会形成很长的横向滚动条，因此能够添加 direction 规则来避免：

p {
            text-indent: -9999px; // 万一往后用户屏幕宽度达到1万肿么办？（这好像不可能。。。）
            background: url(logo.png);
            direction: ltr; // 设置为从左到右读的方向，避免 rtl 语言环境下出现横向滚动条
        }

一个比较好的可选方案：

p { 
            text-indent: 100%; 
            white-space: nowrap; 
            overflow: hidden; 
            background: url(logo.png);
        }

参考连接：

• Disallow negative text indent
• Stop Using the text-indent:-9999px CSS Trick
• CSS Image Replacement