爲了語義化,我們可能會利用圖片替換文字的方式來給我們的站點增色,舉個栗子:
<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 texindent
Stop Using the text-indent:-9999px CSS Trick
CSS Image Replacement