1

作業中の Web サイトに問題があり、解決策がまったく見つからないようです。私が抱えている問題は、サイトのトップ メニューにあります。ほとんどのブラウザでは問題ないように見えますが、最後の項目に余分な行を追加してメニューが「壊れる」ブラウザがいくつかあります。

何が原因であるかを調査してきましたが、問題はブラウザが文字間隔を処理する方法にあるようです - 一部のブラウザ、特にモバイルブラウザは、文字間に余分なピクセルを追加して、ヘッダーのコンテンツがそのスペースに収まらないようです. これは、サイト全体で letter-spacing がゼロに設定されている場合でも発生します: 一部のブラウザは余分なスペースを追加するように見えるため、ほとんどのブラウザがゼロとして使用するものはそれらに対して -1 になります。

これを修正することになると、私は知恵が尽きてしまい、もちろんひどいアイデアであるトップメニューに画像を使用する以外に何も考えられません. ですから、ここにいる他の誰かがそのような問題に遭遇したかどうか、そして文字間隔が実際にブラウザを通じて標準化されるようにする方法を誰かが知っているかどうかを尋ねたいと思います。

問題のウェブサイトは次のサイトです。

http://maxworth.ca/blog/

定期的に chrome を使用して (問題ないように見えます)、chrome dev ツールを使用してサイトを Android 4.0.2 - Galaxy Nexus としてレンダリングすると、この問題を確認できます。この問題は多くの (主にモバイル) ブラウザーで発生するようです。サイトがモバイル ブラウザーで完璧に見えるように正確にコーディングされていないことはわかっていますが、これが現在発生しているゲームを壊す問題の 1 つです。

前もって感謝します。

4

1 に答える 1

2

これに対する良いアプローチは、アイテムを操作してスペースを埋めるのではなく、フォントサイズや文字間隔などに関係なく、メニューアイテムをコンテナの幅に合わせて「正当化」することだと思います。ブラウザごとにテキストのレンダリングが少し異なるため、一貫した外観を実現することは非常に困難です。このソリューションは非常にうまく機能します: 水平方向のリストを正当化するにはどうすればよいですか?

于 2013-09-23T18:39:39.893 に答える