Using em for layout causes inconsistency across different browsers

StackOverflow https://stackoverflow.com/questions/8680976

質問

I am trying to build a site using elastic layout. I have used Eric Meyer's CSS reset and also used body {font-size:62.5%} in my stylesheet.

EDIT: Here is my HTML structure and 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() no-repeat top center fixed;} 

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

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

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

`

As you can see, if I set a fixed width for the body, the background for #other and #footer remain fixed. So I tried to get around it by setting the width to 100% and using margin: 0 8em 0 8em to center the gallery and the contents of #other and #footer.

The layout I am trying to achieve is basically a one-column layout containing a gallery of pictures. The whole gallery should be centered in the page. I have used em for defining margin and this causes different results in different browsers. If the gallery is centered in one browser, other browsers show a different result. I have tried Firefox, Chrome, and IE9.

Is there any way to produce identical layouts using em as the unit of measurement? Or should I try a fixed layout and use pxinstead of em?

役に立ちましたか？

解決

Keep em or percentanges. They do work.

However, using them for centering is probably part of your issue. Centering should be done with auto, for example:

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

他のヒント

Your inconsistency is a combination of things. Defining your body {font-size: 62.5%} is telling the browser to display the font at 62.5% of its base font-size setting (which is both user controlled and even variable per font). Then, using em later in the css cascade is again applying a scaling factor based upon the size of font as just defined (that scaling is harder to define: see http://webdesign.about.com/od/fonts/qt/em-origins.htm ). So a browser font set to 14px will become 8.75px (14 * .625) which (for sake of illustration) at 2em theoretically might be 17.5px (8.75 * 2). If the browser had a default 16px font, then the two numbers would be 10px and theoretically 20px.

So, to help with inconsistency in using em units, setting a px value and a universally recognizable font on the body tag (either standard web fonts or perhaps by @font-face) would help standardize em unit values lower in the css cascade.

Jason McCreary's answer is good if you have a "fixed width" container, but if you want to "fix the margin size" then your current idea of setting a px or em unit for your margins is just fine for centering.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top