Helveticaでレンダリングされるテキストの垂直位置とそのコンテンツ領域のサイズは、FirefoxとChromeforMacで異なります。たとえば、Chromeでは、行の高さがフォントのサイズと同じである場合、子孫はクリップされます。
(サイズとテキストの位置の違いを示すために、この画像のブロック要素の位置を調整し、ベースラインの一貫性を維持しています)。Macをお持ちの場合は、このJSビンで私が話していることを確認できます。
今、私はこの特定の不一致を修正する方法に直接興味がありません。違いを排除またはペーパーオーバーしようとする手動で調整されたリセットスタイルシートがあることはわかっていますが、そもそもこれらのブラウザーのレンダリングが異なる原因となった要因に特に関心があります。
私はここでいくつかの仮定をしています:
フォントのレンダリングと、標準ボックスモデル内のグリフのサイズ設定と配置の両方に標準が存在しますが、それらがどのように相互作用するかについては指定されていない場合があります。
前述の標準のブラウザメーカーの解釈にはバグが存在し、テキストのサイズ、配置、およびレンダリング方法に影響を与える可能性があります。
これらの特定のブラウザの場合、設計に関する議論と実際の実装の多くは、何らかの形で公開されています。したがって、どこを見ればよいかがわかれば、そのような不一致の原因を知ることができます。
両方のブラウザは同じ場所で起動します-マークアップ、スタイル、フォント定義はそれらの間で一貫しています。ある時点で、これらを使用して最終出力を生成する方法が異なります。
したがって、私の具体的な質問は、プロセスのどこでこの発散が発生し、何が原因で発生するのかということです。
この知識を身につければ、そのような不一致を修正する方法をよりよく理解できると思います。特にこの場合と、将来遭遇する可能性のある同様の状況の両方。