Web制作メモ -トップへ-

Android3の標準ブラウザではfont-size:0;が効かない

HTML&CSS2015.07.11 14:17

Android3の標準ブラウザではAタグのfont-size:0;が効かずテキストが非表示になりませんでした。

例えば以下のようなコードでは「テスト」という文字と、画像で作った「テスト」という文字(test.png)が2重に表示されます。

HTML

<a id="test" href="/test.html">テスト</a>

CSS

#test {
    background: url(/img/test.png) 0 0 no-repeat;
    width: 100px;
    height: 20px;
    font-size: 0;
    line-height: 0;
}

解決方法

font-size:0を使わずtext-indent:100%;を使う方法で非表示にすると上手く行きます。

CSS

#test {
    background: url(/img/test.png) 0 0 no-repeat;
    width: 100px;
    height: 20px;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}

なぜこういうことをやっているかというと、CSSの背景画像を使ってテキストを画像テキストで代替する時に、Googlebotが画像テキストを認識できずSEOで不利になると聞いたからです。

しかし、よくよく調べてみると、画像のALT属性で十分認識されるという話もあり、わざわざ記述しなくてよいとのこと…。

SEOの為に表示しないテキストをわざわざ書くというのはスマートでないのでこれからはテキスト自体を書かないことにします。