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

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

0 голосов
/ 30 декабря 2011

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

РЕДАКТИРОВАТЬ: Вот моя структура HTML и CSS

<html><br> <head><br> </head><br> <body><br> <div id="container"><br> <div id="gallery"><br> </div><br> <div id="other"><br> </div><br> </div><br> <div id="footer"><br> </div><br> </body><br> </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 ]

3 голосов
/ 30 декабря 2011

Сохранить em или проценты. Они делают работают .

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

div.page {
  margin: 0 auto;
  width: 925px;
}
2 голосов
/ 30 декабря 2011

Ваше несоответствие - это сочетание вещей. Определение 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). Если бы в браузере был шрифт по умолчанию 16 пикселей, тогда эти два числа были бы 10px и теоретически 20px.

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

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

...