Question

我不明白为什么FF和Chrome以不同的方式呈现我的页面。这是

中的一个屏幕

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

这里是chrome中的一个

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>

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

这是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

是否有更好的方法可以在不使用浏览器特定黑客的情况下进行修复？

Answer 1

我不敢相信这是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中我注意到定位不同。这有效！

Answer 2

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

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

Answer 3

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

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

简单的重置：

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

将它放在CSS的顶部。

Answer 4

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

Answer 5

真正的解决方案是firefox，即不要设置top，left，right和bottom的默认值。

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

Answer 6

而不是使用保证金使用左，上，右，下。例如：

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

Answer 7

我认为这是因为你没有指出包含按钮的div（passenger-info）的高度;当您不指定时，Chrome会开始执行操作。

Answer 8

在2020年，针对mozilla的平台本机属性之一使用功能查询可能是正确的方法。-moz-appearance是此类属性之一，但其他属性也可以工作。

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

Answer 9

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

当我这样做时，它会改变两个位置，但会在两者中设置边距。我得到了我想要的地方，用Firefox和Chrome解决这个问题，你必须遵循一些技巧才能将图像放在正确的位置。玩这个位置让它发挥作用。

在firefox和chrome中绝对定位的问题

9 个答案: