Использование em для макета приводит к несогласованности в разных браузерах

Я пытаюсь создать сайт с использованием эластичного макета. Я использовал сброс CSS Эрика Мейера, а также использовал body {font-size:62.5%} в моей таблице стилей.

РЕДАКТИРОВАТЬ: Вот моя структура 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, background за #other а также #footer остаются неизменными. Поэтому я попытался обойти это, установив width в 100% и используя margin: 0 8em 0 8em центрировать галерею и содержание #other а также #footer,

Макет, который я пытаюсь достичь, в основном состоит из одной колонки, содержащей галерею изображений. Вся галерея должна быть в центре страницы. я использовал em для определения margin и это вызывает разные результаты в разных браузерах. Если галерея сосредоточена в одном браузере, другие браузеры показывают другой результат. Я пробовал Firefox, Chrome и IE9.

Есть ли способ создать одинаковые макеты, используя em как единица измерения? Или я должен попробовать фиксированный макет и использовать pxвместо em?

Источник

2 ответа

Решение

Держать em или проценты. Они работают.

Тем не менее, использование их для центрирования, вероятно, является частью вашей проблемы. Центрирование должно быть сделано с auto, например:

div.page {
  margin: 0 auto;
  width: 925px;
}
Источник

Ваша несостоятельность - это сочетание вещей. Определение вашего body {font-size: 62.5%} говорит браузеру отображать шрифт на 62,5% от его базового размера шрифта (который контролируется пользователем и даже изменяется для каждого шрифта). Затем, используя em позже в каскаде css снова применяется коэффициент масштабирования, основанный на только что определенном размере шрифта (это масштабирование сложнее определить: см. http://webdesign.about.com/od/fonts/qt/em-origins.htm). Таким образом, шрифт браузера установлен на 14px станет 8.75px (14 * .625), который (для иллюстрации) в 2em теоретически может быть 17.5px (8,75 * 2). Если бы в браузере был шрифт 16px по умолчанию, то эти два числа были бы 10px и теоретически 20px,

Итак, чтобы помочь с несогласованностью в использовании em единицы, настройка px значение и универсально узнаваемый шрифт на body тег (или стандартные веб-шрифты или, возможно, @font-face) поможет стандартизировать em единичные значения ниже в каскаде CSS.

Ответ Джейсона МакКрири хорош, если у вас есть контейнер с "фиксированной шириной", но если вы хотите "исправить размер поля", тогда ваша текущая идея установить px или же em Единица для ваших полей просто отлично подходит для центрирования.

Источник
Другие вопросы по тегам