Webkit / Firefox - 位置绝对的图像

Question

ħ！

我在webkit-browsers和firefox中定位一些元素时遇到了问题。

在Safari / Chrome中，看起来我想要它：

但在Firefox中，它看起来像这样：

代码

HTML

<ul>
  <li>
    <div class="img">
      <a href="#">
        <img src="#" />
        <p><span class="circle"><img src="white-circle.png" alt="" /></span></p>
      </a>
    </div>
  </li>
</ul>

CSS

li {
  position: relative;
}

p {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: black;
}

p img {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35%;
  margin-left: -35%;
}

知道那里发生了什么吗？ Firefox会以不同的方式解释position: absolute吗？

Answer 1

当你使用绝对定位时，firefox似乎总是以不同的方式移动Chrome和Safari。我的意见是

    p img:{position: relative;}

（相对位置很好，只有当我使用绝对时）。

祝你好运

Answer 2

显然，其他一些混乱的CSS规则正在那里工作。作为临时修复，我使用this guide找到了在Firefox中运行的解决方案 可能这是影响所有图像的一些规则，但我现在无法找到它。