Ошибка абсолютного положения Firefox

Question

У меня проблема с абсолютным положением в firefox. Он отличается от Chrome, IE или Opera.

Я говорю о навигации здесь http://mapylasky.xdiv.cz/

Во всех браузерах Firefox ожидать, что они находятся в одной строке. В Firefox они не на месте.

.menu-item{ 
    position: absolute; 
    color: #000; 
} 

.menu-item .icon{ 
    position: absolute; 
    background-image: url('<?php echo get_template_directory_uri(); ?>/img/menu/menu-icons.png'); 
    } 

    .menu-item .desc{ 
     position: absolute; 
     font-size: 16px; 
    } 

.container{ 
    width: 1100px; 
    margin: 0 auto; 
    position: relative; 
} 

.menu-item .icon{ 
    height: 56px; 
    } 

.menu-item.prvni{ 
    left: 11px; 
    top: 21px; 
} 

.menu-item.prvni .icon{ 
    width: 193px; 
    height: 92px; 
    background-position-x: 452px; 
} 

.menu-item.prvni .desc{ 
    left: 0px; 
    top: 0px; 
} 

HTML

 <div class="navigation-background"> 
      <div class="container"> 


        <a href="javascript: void(0)" onclick="scrollToAnchor('uvod');"> 
         <div class="menu-item prvni active" id="home-menu"> 
          <div class="icon"></div> 
         </div> 
        </a> 


      </div> 
     </div> 

Что я делаю неправильно?

JSFiffle: https://jsfiddle.net/2cne0fnc/

Answer 1

Firefox не поддерживает background-position-x, но поддерживает background-position

Просто измените ваш background-position-x: 100px в background-position:100px 0 включать как х и у позиции.

Рабочий пример: https://jsfiddle.net/41xb9xfb/