html - Webkit/Firefox - 图像的绝对位置

Question

H！

我对 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 规则在那里起作用。作为临时修复，我使用本指南来寻找在 Firefox 中工作的解决方案。
可能这是影响所有图像的一些规则，但我现在找不到它。