html – 在Firefox和chrome中绝对定位的问题

我不明白为什么FF和Chrome不同地渲染我的页面.这是一个屏幕

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

这是一个在铬

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

场集具有相对位置,图像具有绝对位置.

这里的基本结构如下：

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

基本上,图像在传奇之后被宣布.

这是css for fieldset：

.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确实在渲染fieldets有问题.

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

有没有更好的方式做一个修复,而不使用浏览器特定的黑客？

解决方法

我不敢相信这是4岁,还没有回答.我搜索了每一个地方这个答案.这是我在场集中的图像上使用position absolute的功能.从这里,更改您的正确和顶部的定位,使其适用于您的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中我注意到定位不一样.这工作！