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

Question

我不明白为什么FF和Chrome以不同的方式呈现我的页面.这是一个它的屏幕

firefox:firefox示例http://grab.by/65Bn

这是Chrome中的一个

chrome:chrome示例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包装器,然后绝对将元素放在包装器的右上角,使它位于fieldset的角落.