fonts - googlefontscssオーバーフロー動作chromevsfirefox

Question

ChromeとFirefox（理想的にはIEも）の間でCSSオーバーフローを一貫させる必要がある特定の関数をWebページに作成しています。Arialなどの一般的なWebフォントを使用する場合は問題ありませんが、Google Webフォントを使用し始めると、CSSオーバーフローに違いが見られます。

デモは次のとおりです。jsfiddleデモこれは、いくつかのサンプルテキストを含む固定幅のdivです。「Playball」はグーグルフォントです。

#box {
   height: 160px;
   width: 200px;
   border: black 1px solid;    
   font-size: 2em;
   font-family: 'Playball', cursive;
   overflow-x: hidden;
   overflow-y: scroll;   
}

1）Firefox（L）およびChrome（R）で実行されているjsfiddleデモのスクリーンショット。「Arial」を使用すると、両方のブラウザでオーバーフローが発生することはありません。 FF（L）vs Chrome（R）、ARIAL、オーバーフローなし-y

2）Firefox（L）およびChrome（R）で実行されているjsfiddleデモのスクリーンショット。「Playball」を使用すると、Firefoxにはオーバーフローがあります（スクロールバーを参照）が、Chromeにはありません FF（L）vs Chrome（R）、PLAYBALL、オーバーフロー-y

ChromeとFirefoxの間でCSSオーバーフローの一貫性を保つにはどうすればよいですか？

編集：以下のKamalのコメントによると、両方のdivに行の高さを追加しましたが、実際、スクロールバーの外観は一貫しています。ただし、別の問題は3行目にあり、「ジャンプオーバー」はChromeに適合しますが、「ジャンプオーバー」のみがFFに適合します。何か案は？最新のフィドル。

Chrome L、FireFox R

score 4 · Accepted Answer

両方のスクリーンショットのように、線の高さを変更してみてください。線の間の間隔だけが少し異なって見えます。編集：文字間隔の調整も試してください。

score 0 · Accepted Answer

オーバーフローをより一貫性のあるものにする方法を見つけました。オーバーフロー：スクロールを指定しても、スクロールは理由がない限り効果がないため、もう少し手動で強制する必要があります。

ここで解決策の一部を見つけました：WebKit /BlinkでOSXトラックパッドユーザーのスクロールバーが非表示になるのを防ぐにはどうすればよいですか？

また、更新されたスタイルでフィドルを作成しました。そのため、ボックスが小さすぎてスクロールバーが表示されない場合でも、行を一貫して折り返すために、ボックス内のスペースを占有しています。

score 0 · Accepted Answer

これは、異なるレンダリングエンジンを使用するブラウザごとに解決できないと思います。つまり、スクロールバーやチェックボックスなどのブラウザ要素を意味します（特にWindowsでは、XPと7、OSXとLinuxでもテストできます）

文字間隔と行の高さ、問題は常に発生していました。

score 0 · Accepted Answer

0

cssで行の高さ、文字の間隔、単語の間隔を定義してみてください。

于 2012-04-13T05:58:16.937 に答える

fonts - googlefontscssオーバーフロー動作chromevsfirefox

4 に答える 4

Related

Reference