Firefox 和 Chrome 中的绝对定位问题答案

【问题标题】：Problem with absolute positioning in Firefox and ChromeFirefox 和 Chrome 中的绝对定位问题
【发布时间】：2011-04-04 08:19:50
【问题描述】：

我不明白为什么 FF 和 Chrome 会以不同的方式呈现我的页面。这是它的屏幕截图

火狐：firefox example http://grab.by/65Bn

这是 chrome 中的一个

铬：chrome example http://grab.by/65BB

fieldset有相对位置，图片有绝对位置。

这是基本结构：

<fieldset class="passenger-info">
  <legend>Passenger 1</legend>
  <div class="remove-me">
    <img src="/images/delete-icon-sm.png" />
  </div>
</fieldset>

基本上图像是在图例之后声明的。

这是字段集的 css：

.passenger-info {
  background:none repeat scroll 0 0 #F2F2F2;
  border:1px solid #9D240F;
  display:inline;
  float:left;
  margin-bottom:10px;
  margin-right:10px;
  padding:3px 10px;
  position:relative;
  width:350px;
}

对于删除我的图像：

.remove-me {
  border:1px solid red;
  position:absolute;
  right:0;
  top:0;
}

这太奇怪了。我试着把字段集填充出来，图像向上移动了一点，但仍然不在角落。

这篇文章表明 FF 在渲染字段集方面确实存在问题。

http://www.codingforums.com/showthread.php?t=132624

有没有更好的方法在不使用特定于浏览器的 hack 的情况下进行修复？

【问题讨论】：

HTML 会更有帮助，我猜你粘贴的结构是 Ruby？
yup haml，它更像是 html 的伪代码，但我想我可以给它一个编辑

标签： html css firefox google-chrome css-position

【解决方案1】：

在 2020 年对 mozilla 的平台原生属性之一使用功能查询可能是解决此问题的正确方法。-moz-appearance 就是这样一个属性，但其他属性也可以。

@supports (-moz-appearance: none) {
 .remove-me {
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

【讨论】：

【解决方案2】：

不要使用边距，而是使用左、上、右、下。示例：

position: absolute; top: 10px; left: 20px;

【讨论】：

【解决方案3】：

真正的解决方案是firefox，即不设置顶部、左侧、右侧和底部的默认值。

我能够通过正确设置这些来解决我的问题。

【讨论】：

【解决方案4】：

我认为这是因为您没有指出包含按钮的 div (passenger-info) 的高度；当您未指定此内容时，Chrome 会开始运行。

【讨论】：

【解决方案5】：

我不敢相信这已经 4 岁了，还没有回答。我到处寻找这个答案。这是我在字段集中的图像上使用绝对位置所做的。从这里，更改您的右侧和顶部位置，使其在 Firefox 中适合您。（为 IE、Chrome、Safari、Opera 保留原来的类）

@-moz-document url-prefix() { 
  .remove-me {
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

这是一个 Firefox Hack，有人告诉我它适用于每个版本的 Firefox。我使用的是 Firefox 版本 33.0.2，所以我无法确认这适用于旧版本。我在我的网站上遇到了同样的问题。它在 IE、Opera、Safari 和 Chrome 中看起来是一样的。只有在 Firefox 中，我才注意到定位不同。这行得通！

【讨论】：

这对我有用。虽然我在@moz-document url-prefix() 之外设置了默认顶部
谢谢。帮了我很多。 :)
对于遇到此问题的人，请尝试将 .remove-me 放在父 div 上，放置在绝对定位的元素上。我不需要包含 position: absolute;但我确实必须包含边框 1px solid #FFF

【解决方案6】：

我在一个网站上遇到了类似的问题，并且 Chrome 中的图片有问题。我在图像和输入框中的位置与本文开头的示例相同，我通过将绝对位置放在输入框中并将图像位置放在相对坐标中来解决它。

当我这样做时，它会更改两个位置，但会在两者中添加边距。我把它放在我想要的地方，要使用 Firefox 和 Chrome 解决这个问题，您必须遵循其中一些技巧才能将图像放在正确的位置。调整位置以使其发挥作用。

【讨论】：

-1：我很难估计你的答案有多大帮助，但我让你 -1 建议改变，如果我理解正确，这可能会破坏结果更多，这可以通过“其中一些技巧”来解决 - 你不想指出。请写得更清楚一些，并尝试更具体。
澄清“其中一些技巧”。此外，几乎从不正确地说您有“Firefox 和 Chrome 的问题”——它们表现良好。表现不佳的浏览器是 Internet Explorer

【解决方案7】：

我使用了@media screen 和 (-webkit-min-device-pixel-ratio:0) {} 并以这种方式修复了我的绝对值。它不是很干，但很有效。

【讨论】：

【解决方案8】：

.remove-me 元素似乎有边距。确保在向项目添加绝对定位之前将其删除。

为了获得精确的结果，您应该始终在 CSS 中进行“重置”。这意味着从每个元素中删除边距/填充。

简单的重置：

* { margin: 0; padding: 0px; }

把它放在 CSS 的顶部。

【讨论】：

我正在使用指南针/蓝图框架，是的，我总是重置，所以它不是边距。并且 * 有点矫枉过正，我改用 eric meyer 的重置

【解决方案9】：

Firefox 似乎有一个不可见的填充或边距，将元素放置在文本空间的右上角。 Chrome 将该元素放置在文本流之外的 fieldset 元素的右上角。

您可以做的一件事是添加一个 div 包装器，然后将元素绝对定位在包装器的右上角，使其位于字段集的角上。

【讨论】：