Таинственная разница в 2px между Firefox и Chrome

Question

Мой вопрос относится к адресу this сайт, который я разрабатываю. Посмотрите, где есть 4 круга и 4 кнопки внутри? Это их отношение CSS:

/* STEPS HIGHLIGHT */ 
.steps { 
background: transparent url(img/bg-steps.gif) 37px 92px no-repeat; 
    clear: both; 
    float: left; 
    text-transform: uppercase; 
} 
.steps .col { 
    margin-top: 15px; 
    text-align: center; 
} 
.col.steps-1 { 
    width: 194px; 
} 
.col.steps-2 { 
    margin-left: 40px; 
    width: 196px; 
} 
.col.steps-3 { 
    margin-left: 21px; 
    width: 232px; 
} 
.steps .col.last { 
    margin-left: 11px; 
    width: 226px; 
} 
.steps .col.last h3 { 
    margin: 0 auto; 
    width: 129px; 
} 
.steps h2 { 
    font: 24px 'ProximaNovaLight'; 
} 
.steps h3 { 
    color: #7f7f7f; 
    display: block; 
    font: 14px 'ProximaNovaSemibold'; 
    height: 20px; 
} 
.steps p { 
    font: 9px 'Arial'; 
} 
.steps .col .icon { 
    margin: 28px 0 40px 0; 
    position: relative; 
    left: 43px; 
    width: 98px; 
    height: 98px; 
} 
.steps-1:hover h3, 
.steps-2:hover h3, 
.steps-3:hover h3, 
.steps .col.last:hover h3 { 
    color: #c03a2f; 
} 
.steps-1:hover .icon, 
.steps-2:hover .icon, 
.steps-3:hover .icon, 
.steps .col.last:hover .icon { 
    background: transparent url(img/ico-steps-hover.gif) -6px 3px no-repeat; 
} 
.steps-2:hover .icon { 
    background-position: -240px 3px; 
} 
.steps-3:hover .icon { 
    background-position: -457px 3px; 
} 
.steps .col.last:hover .icon { 
    background-position: -700px 3px 
} 

Как вы можете видеть, что я использовал фоновое изображение для кругов и <a> элементов для создания эффекта парения. Первоначально анкеры не имеют фона. При наведении им присваивается одинаковый спрайт и разные фоновые позиции. Я использовал относительное позиционирование и поля для размещения элементов <a>.

Моя проблема в том, что существует разница 2px между Chrome и Firefox, которая нарушает эффект во втором. Я не могу определить, появляется ли разница в полях в фоновой позиции и почему она существует.

У кого-нибудь была такая проблема? Почему это происходит? Как это исправить? Я изо всех сил пытаюсь найти решение.

Answer 1

Могу ли я предложить лучший способ реализации этого? У вас есть 2 больших изображения, которые составляют 21,8K и 23k. Вам нужно только 1 изображение для кругового фона. и значки с их красным состоянием зависания в спрайте. и вам не нужно изображение для горизонтальной линии, вы можете сделать это с помощью чистого CSS. Нажмите на ссылку ниже.Вот что он должен выглядеть следующим образом: fiddle

ваш HTML:

<div class="anchorSection"> 
     <div class="circle"> 
      <a href="#" class="wheel"></a> 
     </div> 
     <div class="circle"> 
      <a href="#" class="wheel"></a> 
     </div>   
     <div class="circle"> 
      <a href="#" class="wheel"></a> 
     </div> 
     <div class="circle" style="margin-right:0"> 
      <a href="#" class="wheel"></a> 
     </div> 
     <div class="horizontal"> 
    </div> 

и ваш CSS:

 .anchorSection{ 
      width:838px; 
      height:102px; 
      position:relative; 
     } 
     .circle{ 
      width:99px; 
      height:102px; 
      background:url("circle.gif"); 
      float:left; 
      margin-right:147px; 
      z-index:-1; 

     } 
     .circle:last-child{ 
      margin-right:0; 
     } 
     .circle a{ 
      width:39px; 
      height:39px; 
      display:block; 
      margin:0 auto; 
      margin-top:29px; 
     } 

     .circle a.wheel{ 
      background:url("wheel.gif") 0 0 no-repeat 
     } 
     .circle a.wheel:hover{ 
      background-position:-39px 0; 
     } 
     .horizontal{ 
      position:absolute; 
      top:50%; 
      border-top:1px solid #cfcfcf; 
      border-bottom:1px solid #ececec; 
      width:100%; 
      z-index:1 
     } 

Я только сделал первый значок для вас, но повторил это в 4 раза. вам, очевидно, понадобится сделать остальные 3 значка и их соответствующее состояние зависания. Обязательно поместите все 8 значков в спрайт, так что вы загружаете только одно изображение и используете правильное положение фона, чтобы получить правильное изображение для каждого значка и состояния зависания. Надеюсь это поможет.

Answer 2

В Firefox пользовательский шрифт «ProximaNovaLight» не загружается, поэтому высота элемента h2 внутри .steps немного отличается от того, что находится в Chrome.

В Chrome h2 имеет вычисленную высоту 26 пикселей, тогда как в Firefox - 30 пикселей. Добавьте этот CSS, чтобы сделать Chrome и Firefox совместимыми:

.steps h2 { 
    height: 26px; 
} 

Это самое быстрое «исправление».

Основная проблема заключается в том, что высота h2имеет значение вообще. То, как вы реализовали эту часть своего сайта, не является надежным. У вас есть полное «неактивное» изображение в качестве фонового изображения на .steps, но тогда у вас есть «активные» изображения, индивидуально расположенные в каждом из элементов <a class="icon">. Это склонно к взлому.

Например, даже в Chrome, где он предположительно работает в данный момент, попробуйте немного увеличить масштаб, а затем наведите указатель мыши. Изображения вращаются вокруг.

---

Другая проблема с сайта является то, что у вас есть HTML комментарий выше DOCTYPE, что вызывает quirks mode (даже in Firefox).

<!-- BEGIN WP_HEADER --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Удалить комментарий!

Answer 3

Почему бы не использовать таблицу стилей сброса, чтобы выровнять оба браузера, а затем применить стиль.

http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

Answer 4

OK. Загрузили все ваши ресурсы и подтвердили, что проблема действительно появляется даже в Chrome, если webfont не загружается, как в Firefox. (Простое деактивация шрифта в инструментах dev не работает для его воспроизведения, потому что размеры элементов уже установлены к тому времени, когда вы это сделаете.) Итак, мы можем ответить «, почему это происходит в Firefox, но не в Chrome?" окончательно с этим: это шрифт. Итак, если вы можете правильно загружать шрифт в FF, проблема решена.

Как исправить иначе? Вы усложняете свою жизнь, если вам присвоены фоны двум различным элементам. (Основной фон находится на .steps, а фон :hover находится на дочерних элементах .col.) Всегда проще обходить вещи, когда вы просто меняете фон на один и тот же элемент. Я сделаю горизонтальную линию фоном на .steps, а затем сделаем круглые значки значков как для полей .col. Таким образом, независимо от того, как будет переполняться остальная часть страницы, они все равно будут выровнены друг с другом, а в худшем случае фоновая линия будет слегка неактивной. Но ...

Но почему это происходит здесь? Насколько я могу судить, не имея возможности загружать ваши файлы webfont для дальнейшего тестирования, это связано с тем, что ваш стиль .steps h2 не обеспечивает явную высоту, а высота определяется во время рендеринга на основе характеристик шрифта. Когда webfont присутствует, этот элемент имеет высоту 26 пикселей. Когда он отсутствует, высота равна 28px. Если вы явно задаете высоту 28px, вы можете покрыть и спланировать любую ситуацию. Когда я устанавливаю эту высоту в 28px, а затем устанавливаю смещение фона для значков :hover -15px вместо текущего 33px, все, кажется, работает. Когда я делаю эти изменения на вашем рабочем сайте в dev-инструментах, он работает как в Chrome, так и в Firefox, с веб-сайтом или без него.

Answer 5

Добавить это на CSS:

* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}