Webkit/Firefox - 图像的绝对位置答案

【问题标题】：Webkit/Firefox - position absolute of imageWebkit/Firefox - 图像的绝对位置
【发布时间】：2013-01-13 01:25:31
【问题描述】：

喂！

我对 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 的解释是否不同？

【问题讨论】：

我已经在 Firefox 中测试过它也可以工作。
不想在这里粗鲁或冒犯所以不要误解，但是这个 html 有点恐怖，空的图像标签？图像周围的 p 和跨度？为什么一个 div 包裹着它为什么你不给 li 上课？一切正常，难怪浏览器不能正确呈现它
@LeventeNagy 当然你是对的，但请记住这只是一个例子。我可能过于简单化了，是的。

标签： html css positioning css-position

【解决方案1】：

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

    p img:{position: relative;}

（只有当我使用绝对位置时，相对位置才可以）。

祝你好运

【讨论】：

【解决方案2】：

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

【讨论】：

使用 !important 覆盖这些样式
自然地，您为节点指定的样式越具体，就会覆盖更公开的样式。那么，一定不能出问题。