しばらく前、Stack Overflowでこの質問に答えました。
https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements
問題は、HTMLの空白の影響により、display: inline-block
を持つ要素に「余分なギャップ」があることです。 http://jsfiddle.net/thirtydot/4z4v2/ を参照してください
示されているように、ギャップはHTMLの空白を削除することで削除できます。ただし、その空白を削除することは、望ましくない修正になる場合があります。たとえば、HTMLの操作が難しくなります。
そこで、この回避策を提案しました: http://jsfiddle.net/thirtydot/4z4v2/1/
ul {
font-size: 0;
letter-spacing: -1px;
}
li {
font-size: medium;
letter-spacing: normal;
}
(letter-spacing
はSafariのギャップを完全に根絶するために必要です)
それがそれでした.
..このテクニックが 別の回答 で提案されたときにコメントがポップアップするまで
リンクを含む要素内にテキストを明示的に非表示にしているため、Webクローラーによって悪用と解釈される可能性があるため、このコードには注意してください。より高い特異性ルールのおかげでリンク自体が見えるのは確かですが、それでもウェブクローラーは、すべての祖先にテキストコンテンツを非表示にするように伝えるコンテナ内に多数のリンクを表示します。
このテクニックはoneサイト(..私は通常空白を削除するだけ)でのみ使用し、サイトhasはGoogleで適切にランク付けされています(リンクなし、申し訳ありません)。問題があれば、サイトには「フレーズ+場所」という形式で具体的にターゲットを絞ったページがあります:架空の例として「ゾンビチョッパーレイブンホルム」。
私は本当に Googleを気にしていますが、他の検索エンジンに関する回答も歓迎します。
だから、私の質問は:
テキストが実際に隠されていなくても、font-size: 0
が存在するだけでSEOのリスクになりますか?
グーグルは技術を罰するつもりはない。彼らは悪意を処罰しようとしています。 display:none
が正当な目的とブラックハットSEOの両方に使用できるように、他のCSSルールにも同じことが当てはまります。あなたの場合、テキストは決して隠されず、検索エンジンとユーザーの両方に利用可能であり、表示されますので、大丈夫です。