html - 1行のピクセルが欠落していますChromeで

Question

私は自分のウェブサイトでFFとIEでうまく機能する基本的なリストを使用しています。ただし、Chromeでは1行のピクセルが欠落しています。

JsFiddleはコメントでJaredに感謝します。

欠落している線が表示されない場合は、ズームの値を変更してください。一部の値（たとえば、私のPCでは90％）で表示されます。

問題の原因について何か考えはありますか？

スクリーンショット：

灰色の線は1ピクセルジャンプします。

Answer 1

見つかった主な問題：

• 一部の画面サイズでは、dtとの幅にdd加えて、水平方向の余白とパディングが、各行で100％を超える場合があります。最も安全なアプローチは、幅、および水平方向のマージンとパディングに、ではなく％値を使用することですem。
• ddタグをタグと同じ行に配置するためにマージンを使用することにdtは問題があります。レイアウトを実装するためのより安全な方法は、すべてdtのタグをフロートさせ、各タグddを指定することです。マージンを使用してこれを正しく行うことは可能かもしれませんが、要素をフローティングする方がはるかに簡単です。clear:bothdt

デモを更新しました。（注：このデモには余白やパディングが追加されていません。との幅は、水平方向の余白やパディングにいくら追加されても縮小する必要があります。dt）dd

---

マイナーなフォントの問題が見つかりました：

一貫していること

• Nofont-familyが指定されたため、デフォルトのセリフフォントが使用されます。
• Nofont-sizeが指定されたため、デフォルトの16pxが使用されます。
• line-height:2emフォントサイズの2倍、16ピクセルの2倍、32ピクセル（灰色の最初の行の高さで表示）です。
• 灰色の最初の行の高さは、ChromeとFirefoxの両方で32pxです。

一貫していないもの

• Chromeでは、16pxのデフォルトのセリフフォントfont-sizeは12px（大文字のHの高さ）のベースラインの高さでレンダリングされます。
• Firefoxでは、16pxのデフォルトのセリフフォントfont-sizeは11pxのベースラインの高さでレンダリングされます。

避けることができること

デフォルトのセリフフォントは、さまざまなブラウザで一貫性のないレンダリングを行います。そのフォントがそうするのを防ぐ方法はありません。ただし、デフォルトのセリフフォント以外のフォントを選択することで、一部の不整合を回避できます。Arialなどの一部のフォントは、ブラウザ間でより一貫してレンダリングされます。

避けられないこと

ただし、それでも、テキストのレンダリング方法にはいくつかの矛盾があります。テキストが使用する行の高さのスペース内で、テキストの位置はブラウザごとに少なくとも1px異なることがよくあります。それは防ぐことができるものではありません。これは、オペレーティングシステムが、その特定のブラウザでその特定の特定のブラウザを使用してfont-family、その特定の特定のファイルをレンダリングする方法の結果です。ただし、この場合はすでに明示的に指定することで、不整合を最小限に抑えることができます。font-sizeline-heightline-height

概要

、、、およびを選択するfont-familyと、不整合を最小限に抑えることができます。しかし、それを超えて、避けられないテキストの矛盾は常にほとんどありません。インターネット上のすべてのウェブサイトには、これがいくらかあります。通常、あまり目立ちません。font-sizeline-height