慎用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