Различия между отступами между Chrome и Firefox - PullRequest
Новая
       36

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

1 голос
/ 22 ноября 2011

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

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

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

Ответы [ 4 ]

3 голосов
/ 22 ноября 2011

На самом деле у вас есть две проблемы:

  • 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;}
1 голос
/ 22 ноября 2011

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

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

.main-menu > li > a { 
    width:160px;
    text-align:center;
    padding: 12px 0px 20px 0px;
}
1 голос
/ 22 ноября 2011

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

0 голосов
/ 28 ноября 2011

Это альтернативный ответ, так как он зависит от того, какие браузеры вам нужно поддерживать. Если вам не нужно беспокоиться о 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;}
...