Chrome と Firefox でレンダリングされるテキスト コンテナの幅サイズが異なる

Question

Chrome と Firefox でコンテナの幅が異なるサイズで表示されるのはなぜですか? 画像サンプル。 Chrome: レンダリング幅は 681.273

です

FireFox: レンダリング幅は 685.8499 です

リーリー リーリー

両方のブラウザで次のリンクを開くと、違いがわかります。

これは jsfiddle です

両方のブラウザで同じ幅でレンダリングする方法はありますか?

Answer 1

問題の原因:

• 異なるデフォルト スタイル: Chrome と Firefox には、HTML 要素に対して独自の異なるデフォルト スタイルがあります。
• 2 つのブラウザーの css 処理方法には違いがあります: どちらも独自のレンダリング エンジンを備えているため、css プロパティの処理方法が異なる場合があります。

問題の解決策

• css の使用 reset: css リセットは、ブラウザのデフォルト スタイルを削除するスタイルのセットです (css リセットとは )。

• CSS ベンダー プレフィックスを使用する : これらは、CSS プロパティがこのブラウザーをサポートするようにするために使用される CSS プロパティのプレフィックスです。CSS ベンダー プレフィックス