Различия между отступами между Chrome и Firefox

Question

У меня небольшая проблема с заполнением основного меню, и я надеюсь, что кто-то может мне помочь. В Firefox и IE все отображается нормально. Однако в Chrome и Safari отступы немного отличаются.

Прямо сейчас у меня есть левый / правый отступ, равный 1.82em, что заканчивается небольшим неиспользованным пробелом после "Свяжитесь с нами" в Chrome/Safari. Я также попытался установить для него значение 31px, что в итоге прекрасно отрисовывается в Firefox/IE, но в Chrome / Safari он помещает последний пункт меню в новую строку.

Я читал, что в Firefox и Chrome отступы одинаковы, поэтому я в растерянности. Я могу, вероятно, выйти из этого и использовать разные CSS для разных браузеров, но я бы предпочел этого избежать. Есть идеи?

Answer 1

При увеличении ширины #jsn-страницы до 961px отступы в 31px для ваших ссылок будут работать в Chrome.

Изменить: см. Ответ Денниса ниже. Фиксированная ширина для каждого элемента будет наиболее надежной.

.main-menu > li > a { 
    width:160px;
    text-align:center;
    padding: 12px 0px 20px 0px;
}

Answer 2

У вас на самом деле есть две проблемы:

• 1.82em будет рендериться по-другому (проблема заполнения)
• текст будет отображаться по-разному, давая вам различную "базовую ширину" для каждого элемента (поэтому, когда вы использовали пиксели для заполнения, он тоже не работал)

Как обычно, у вас есть много способов решения.

В одну сторону:

Дайте всем вашим именам классов или идентификаторам LI и установите их ширину, убейте отступы влево / вправо и просто установите text-align: center;

HTML:

<ul class="menu-mainmenu">
  <li class="menu-mainmenu-0 current active first">
    <a class="current" href="/eme/"><span>Home</span></a>
  </li>
  <li class="menu-mainmenu-1">
    <a href="/eme/about"><span>About the Emergicenter</span></a>
  </li>
  <li class="menu-mainmenu-2">
    <a href="/eme/staff"><span>Meet the Staff</span></a>
  </li>
  <li class="menu-mainmenu-3">
    <a href="/eme/forms-and-resources"><span>Forms &amp; Resources</span></a>
  </li>
  <li class="menu-mainmenu-4">
    <a href="/eme/ask-the-doctor"><span>Ask the Doctor</span></a>
  </li>
  <li class="menu-mainmenu-5 last">
    <a href="/eme/contact"><span>Contact Us</span></a>
  </li>
</ul>

CSS:

.menu-mainmenu {width:960px;}
.menu-mainmenu li {text-align: center; padding:12px 0 20px;}
.menu-mainmenu-0 {width:100px;}
.menu-mainmenu-1 {width:217px;}
.menu-mainmenu-2 {width:155px;}
.menu-mainmenu-3 {width:191px;}
.menu-mainmenu-4 {width:158px;}
.menu-mainmenu-5 {width:139px;}

Answer 3

Вы должны заметить, что webkit округляет их до одной десятичной точки, поэтому ваш 1.82em становится 1.8em, когда вы вычисляете, что это на самом деле на уровне пикселей, вы можете даже получить дополнительные различия в пикселях. Они хороши, если вам это нужно, но с ними трудно работать, если вы ищете идеальное качество пикселей.

Answer 4

Это альтернативный ответ, так как он зависит от того, какие браузеры вам нужно поддерживать. Если вам не нужно беспокоиться о ie6 или ie7, тогда вы можете использовать display: table-cell.

http://jsfiddle.net/BU9Gb/

Соответствующее CSS:

.menu-mainmenu {width:980px;display:table;}
.menu-mainmenu li {display:table-cell;}
.menu-mainmenu a {display:block;padding:15px 30px;text-align:center;}