レイアウトにemを使用すると、異なるブラウザ間で矛盾が発生する

私は弾性レイアウトを使用してサイトを構築しようとしています。私はEric MeyerのCSSリセットを使用して、body {font-size:62.5%}を自分のスタイルシートに使用しました。レイアウトにemを使用すると、異なるブラウザ間で矛盾が発生する

編集：ここに私のHTML構造とCSS

<html> <head> </head> <body> <div id="container"> <div id="gallery"> </div> <div id="other"> </div> </div> <div id="footer"> </div> </body> </html>

`HTMLである{bacgroound：固定されたURL（）はリピートトップセンター;}

body {font-family:Arial, Helvetica, sans-serif; 
color:#000; 
margin:auto;} 

'id'other {background-color:color1;} 

'id'footer {background-color:color2;}

ご覧のとおり、bodyの固定幅を設定すると、#otherとのbackground 0は固定されたままである。そこで、widthを100%に設定し、margin: 0 8em 0 8emを使用してギャラリーを中心にして、#otherと#footerの内容を中心にして回避しようとしました。

私が達成しようとしているレイアウトは、基本的に写真のギャラリーを含む1列のレイアウトです。ギャラリー全体をページの中央に配置する必要があります。私はmarginを定義するためにemを使用しました。これはブラウザによって異なる結果をもたらします。ギャラリーが1つのブラウザーの中央に配置されている場合、他のブラウザーは異なる結果を表示します。 Firefox、Chrome、IE9を試しました。

emを測定単位として使用して同一のレイアウトを作成する方法はありますか？または、固定レイアウトを試してemの代わりにpxを使用する必要がありますか？

出典

2011-12-30 tayeed

参考にせずに何が起こっているのかを正確に伝えることは不可能に近いでしょう。可能であれば、リンクを提供してください。 –

emまたはパーセンテージを保持します。 Theydowork。

ただし、これらをセンタリングに使用することはおそらく問題の一部です。センタリングは、例えば、autoで行われるべきである：

div.page { 
    margin: 0 auto; 
    width: 925px; 
}

出典

2011-12-30 15:23:15

また、正しく動作するようにセンタリングする要素の幅を指定する必要があります。 – rahool

@rahool良い点。更新を参照してください。 –

あなたの矛盾は物事の組み合わせです。 body {font-size: 62.5%}を定義すると、ブラウザにフォントの基本フォントサイズの設定の62.5％（フォントによってユーザー制御と変数の両方が可能）が表示されます。次に、CSSのカスケードでemを使用して、定義したフォントのサイズに基づいてスケーリング係数を再度適用します（スケーリングは定義するのが難しい：http://webdesign.about.com/od/fonts/qt/em-origins.htm参照）。したがって、14pxに設定されたブラウザのフォントは、2emに理論的には17.5px（8.75 * 2）であるかもしれない8.75px（14 * .625）（図のために）になります。ブラウザにデフォルトの16ピクセルフォントがある場合、2つの数値は10px、理論的には20pxとなります。

したがって、CSSカスケード下部emユニット値を標準化に役立つだろうpx値とbodyタグ（標準ウェブフォントのいずれか、または多分@font-faceによって）に普遍的に認識可能なフォントを、emユニットを用いて設定する際に矛盾を支援します。

「固定幅」のコンテナがあれば答えは良いですが、「余白のサイズを修正する」場合は、マージンにpx単位またはem単位を設定するという現行の考え方は、センタリングには問題ありません。

出典

2011-12-30 15:47:40 ScottS

可変フォントについて+1良い点。しかし、OPはリセットスタイルシートを使用してメモしました。だからこそ、*あなたが描写しているものは、最小限のインパクトを持つべきです –

@ Jason McCreary - しかし、リセットされたスタイルシートにボディフォントがパーセンテージ（OPが記されている）に設定されていれば、初期のフォントサイズに依存するユーザー（ブラウザ）になります。サイジング。 – ScottS

レイアウトにemを使用すると、異なるブラウザ間で矛盾が発生する

答えて

関連する問題