Html firefox 和 chrome 中绝对定位的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3576624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
problem with absolute positioning in firefox and chrome
提问by corroded
I don't understand why FF and Chrome render my page differently. Here's a screenie of it in
我不明白为什么 FF 和 Chrome 以不同的方式呈现我的页面。这是它的屏幕截图
firefox: firefox example http://grab.by/65Bn
firefox：firefox 示例 http://grab.by/65Bn
and here's one in chrome
这是一个镀铬的
chrome: chrome example http://grab.by/65BB
fieldset has a relative position and the image has an absolute position.
fieldset 有一个相对位置，图像有一个绝对位置。
here's the basic structure:
这是基本结构：
<fieldset class="passenger-info">
<legend>Passenger 1</legend>
<div class="remove-me">
<img src="/images/delete-icon-sm.png" />
</div>
</fieldset>
basically the image is declared right after the legend.
基本上图像是在图例之后声明的。
here's the css for 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;
}
and for the remove-me image:
对于 remove-me 图像：
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
it's totally weird. I tried putting the fieldset padding out, and the image moves up a little, but still not at the corner.
这很奇怪。我尝试将字段集填充出来，图像向上移动了一点，但仍然不在角落处。
This post shows that FF does indeed have problems with rendering fieldsets.
这篇文章表明 FF 在渲染字段集方面确实存在问题。
http://www.codingforums.com/showthread.php?t=132624
http://www.codingforums.com/showthread.php?t=132624
Is there a better way of doing a fix without using a browser specific hack?
有没有更好的方法来修复而不使用浏览器特定的 hack？
回答by Marcus
I can't believe this is 4 years old and still not answered. I searched every where for this answer. Here is what I did to use position absolute on an image within a fieldset. From here, change your right and top positioning to make it work for you in Firefox. (leave your original class in place for IE, Chrome, Safari, Opera)
我不敢相信这是 4 岁，仍然没有回答。我到处搜索这个答案。这是我在字段集中的图像上使用绝对位置所做的工作。从这里开始，更改您的右侧和顶部位置，使其在 Firefox 中适合您。（保留原来的类，用于 IE、Chrome、Safari、Opera）
@-moz-document url-prefix() {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}
This is a Firefox Hack that I'm told works for every version of Firefox. I'm using Firefox Version 33.0.2, so I can't confirm this works on older versions. I had the same problem on my site. It looked the same in IE, Opera, Safari, and Chrome. It was only in Firefox I noticed the positioning different. This works!
这是一个 Firefox Hack，我听说它适用于每个版本的 Firefox。我使用的是 Firefox 版本 33.0.2，所以我无法确认这适用于旧版本。我在我的网站上遇到了同样的问题。它在 IE、Opera、Safari 和 Chrome 中看起来是一样的。只有在 Firefox 中，我才注意到定位不同。这有效！
回答by js1568
It appears that Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.
Firefox 似乎有一个不可见的填充或边距，将元素放置在文本空间的右上角。Chrome 将该元素放置在文本流之外的 fieldset 元素的右上角。
One thing you could do is add a div wrapper and then absolutely position the element in the top right of the wrapper so that it lays over the corner of the fieldset.
您可以做的一件事是添加一个 div 包装器，然后将元素绝对定位在包装器的右上角，使其位于字段集的角上。
回答by Jake Bellacera
It appears that the .remove-me element might have margin. Make sure to to remove that prior to adding absolute-positioning to items.
看起来 .remove-me 元素可能有边距。确保在向项目添加绝对定位之前删除它。
For precise results, you should always do a 'reset' in your CSS. This means removing margin/padding from every element.
为了获得精确的结果，您应该始终在 CSS 中进行“重置”。这意味着从每个元素中删除边距/填充。
A simple reset:
一个简单的重置：
* { margin: 0; padding: 0px; }
Put that at the top of your CSS.
把它放在你的 CSS 的顶部。
回答by Nicktea
I have used @media screen and (-webkit-min-device-pixel-ratio:0) {} and fixed my absolutes that way. Its not very dry but it works.
我使用了 @media screen 和 (-webkit-min-device-pixel-ratio:0) {} 并以这种方式修复了我的绝对值。它不是很干，但它有效。
回答by Arno Inen
I think it is because you didn't indicate the height of the div (passenger-info) that contains the button; Chrome starts acting up when you don't specify this.
我认为这是因为您没有指明包含按钮的 div (passenger-info) 的高度；当您不指定此项时，Chrome 就会开始运行。
回答by Austin Peterson
The real solution is firefox and ie don't set defaults for top, left, right, and bottom.
真正的解决方案是firefox，即不要为顶部、左侧、右侧和底部设置默认值。
I was able to fix my problem by setting these properly.
我能够通过正确设置这些来解决我的问题。
回答by Basant
Instead of using margin use left, top, right, bottom. Example:
不要使用边距，而是使用左、上、右、下。例子：
position: absolute;top: 10px;left: 20px;
position: absolute;top: 10px;left: 20px;
回答by morfeo9950
I had a similar problem with a web site and the images in Chrome where wrong. I had the position in an image and an input box in the same way as your example at the beginning of this post, and I solved it by putting the absolute position in the input box and in the image position in relative coordinates.
我有一个网站和 Chrome 中的图像错误的类似问题。我在图像和输入框中的位置与本文开头的示例相同，我通过在输入框中放置绝对位置和在相对坐标中的图像位置来解决它。
When I do that, it changes both positions but puts margins in both. I got it where I want it, to solve this problem with Firefox an Chrome you have to follow some of these tricks in order to put the images in the right place. Play with the position to make it work.
当我这样做时，它改变了两个头寸，但在两个头寸中都有利润。我把它放在了我想要的地方，要使用 Firefox 和 Chrome 解决这个问题，您必须遵循其中的一些技巧才能将图像放在正确的位置。发挥位置以使其发挥作用。
