Firefox和Chrome中的绝对定位问题
我不明白为什么FF和Chrome呈现我的页面不同。这是它的屏幕截图
火狐：firefox example http://grab.by/65Bn
这是一个铬合金的
chrome：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>基本上，图像是在图例之后声明的。
下面是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图像：
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}这太奇怪了。我试着把fieldset填充放出来，图像稍微上移了一点，但仍然不在角落里。
这篇文章表明FF确实存在渲染字段集的问题。
http://www.codingforums.com/showthread.php?t=132624
有没有更好的方法来修复而不使用特定于浏览器的黑客？
回答 9
Stack Overflow用户
发布于 2014-10-30 22:00:56
我不敢相信这已经是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中，我才注意到定位的不同。这行得通！
Stack Overflow用户
发布于 2010-08-26 23:28:06
Firefox似乎有一个不可见的填充或边距，将元素放在文本空间的右上角。Chrome将元素放在文本流之外的fieldset元素的右上角。
您可以做的一件事是添加一个div包装器，然后将元素绝对定位在包装器的右上角，使其位于字段集的一角。
Stack Overflow用户
发布于 2010-08-27 01:53:13
看起来.remove-me元素可能有边距。在向项目添加绝对定位之前，请确保将其删除。
为了得到精确的结果，你应该总是在你的CSS中做一个“重置”。这意味着删除每个元素的边距/填充。
一个简单的重置：
* { margin: 0; padding: 0px; }把它放在你的CSS的顶部。
https://stackoverflow.com/questions/3576624
复制相似问题