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即可同时包含x和y位置。

工作示例：https://jsfiddle.net/41xb9xfb/

Firefox绝对位置错误

1 个答案: