blocks|key|945188|text|Firefox似乎有一个不可见的填充或边距，将元素放在文本空间的右上角。Chrome将元素放在文本流之外的fieldset元素的右上角。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|945189|您可以做的一件事是添加一个div包装器，然后将元素绝对定位在包装器的右上角，使其位于字段集的一角。|945190|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

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.

blocks|key|1159235|text|看起来.remove-me元素可能有边距。在向项目添加绝对定位之前，请确保将其删除。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1159236|为了得到精确的结果，你应该总是在你的CSS中做一个“重置”。这意味着删除每个元素的边距/填充。|1159237|一个简单的重置：|1159238|*+{+margin:+0;+padding:+0px;+}|code-block|syntax|javascript|1159239|把它放在你的CSS的顶部。|1159240|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

It appears that the .remove-me element might have margin. Make sure to to remove that prior to adding absolute-positioning to items.

For precise results, you should always do a 'reset' in your CSS. This means removing margin/padding from every element.

A simple reset:

<pre><code>* { margin: 0; padding: 0px; }
</code></pre>

Put that at the top of your CSS.

blocks|key|1159301|text|我使用了@media+screen和(-webkit-min-device-pixel-ratio:0)+{}，并以这种方式修复了我的绝对。天气不是很干燥，但很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1159302|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1159338|text|我在一个网站上遇到了类似的问题，Chrome中的图片也是错的。我在图像和输入框中的位置与本文开头的示例相同，我通过在输入框中放置绝对位置和在相对坐标中的图像位置来解决它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1159339|当我这样做时，它改变了两个位置，但在两个位置都增加了边距。我把它放在了我想要的地方，要用Firefox和Chrome来解决这个问题，你必须遵循这些技巧，以便将图像放在正确的位置。摆弄这个位置，让它发挥作用。|1159340|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

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.

blocks|key|945381|text|我不敢相信这已经是4年前的事了，还没有回答。我到处寻找这个答案。下面是我在一个字段集中的图像上使用位置绝对的方法。从这里，改变你的右边和顶部的位置，让它在Firefox中为你工作。(为IE、Chrome、Safari、Opera保留您的原始类)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|945382|@-moz-document+url-prefix()+{+
++.remove-me+{
++++border:1px+solid+red;
++++position:absolute;
++++right:0;
++++top:0;
++}
}|code-block|syntax|javascript|945383|这是一个Firefox+Hack，我听说它适用于所有版本的Firefox。我使用的是Firefox版本33.0.2，所以我不能确认这在旧版本上是否有效。我在我的网站上也遇到了同样的问题。它在IE、Opera、Safari和Chrome中看起来都是一样的。只有在Firefox中，我才注意到定位的不同。这行得通！|945384|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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)

<pre><code>@-moz-document url-prefix() { 
 .remove-me {
 border:1px solid red;
 position:absolute;
 right:0;
 top:0;
 }
}
</code></pre>

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!

blocks|key|945412|text|我认为这是因为您没有指定包含按钮的div+(passenger-info)的高度；当您没有指定这个高度时，Chrome就会开始运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|945413|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1159414|text|真正的解决方案是firefox，ie不会为顶部、左侧、右侧和底部设置默认值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1159415|我能够通过正确地设置它们来解决我的问题。|1159416|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The real solution is firefox and ie don't set defaults for top, left, right, and bottom.

I was able to fix my problem by setting these properly.

blocks|key|945491|text|使用left，top，right，bottom而不是使用边距。示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|945492|position:+absolute;+top:+10px;+left:+20px;|offset|length|style|CODE|945493|entityMap^0|0|0|J|K|A|V|B|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]|$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|I|$]]

Instead of using margin use left, top, right, bottom. Example:

<code>position: absolute;</code>
<code>top: 10px;</code>
<code>left: 20px;</code>

blocks|key|1159470|text|在2020年，对mozilla的平台原生属性之一使用功能查询可能是正确的方法。-moz-外观是一个这样的属性，但其他属性也可以工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1159471|@supports+(-moz-appearance:+none)+{
+.remove-me+{
++++border:1px+solid+red;
++++position:absolute;
++++right:0;
++++top:0;
++}
}|code-block|syntax|javascript|1159472|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Using a feature query against one of mozilla's platform-native properties is probably the correct approach for this in 2020. -moz-appearance is one such property, but others would work as well.
<pre><code>@supports (-moz-appearance: none) {
 .remove-me {
 border:1px solid red;
 position:absolute;
 right:0;
 top:0;
 }
}
</code></pre>

I don't understand why FF and Chrome render my page differently. Here's a screenie of it in 

firefox: <a href="http://grab.by/65Bn" rel="noreferrer">firefox example http://grab.by/65Bn</a>

and here's one in chrome

chrome: <a href="http://grab.by/65BB" rel="noreferrer">chrome example http://grab.by/65BB</a>

fieldset has a relative position and the image has an absolute position.

here's the basic structure:

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

basically the image is declared right after the legend.

here's the css for fieldset:

<pre><code>.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;
}
</code></pre>

and for the remove-me image:

<pre><code>.remove-me {
 border:1px solid red;
 position:absolute;
 right:0;
 top:0;
}
</code></pre>

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.

<a href="http://www.codingforums.com/showthread.php?t=132624" rel="noreferrer">http://www.codingforums.com/showthread.php?t=132624</a>

Is there a better way of doing a fix without using a browser specific hack?

Problem with absolute positioning in Firefox and Chrome

我不明白为什么FF和Chrome呈现我的页面不同。这是它的屏幕截图火狐：这是一个铬合金的chrome：字段集有相对位置，图像有绝对位置。下面是基本结构：<fieldset class="passenger-info"> <legend>Passenger 1</legend> <div class="remove-...

问Firefox和Chrome中的绝对定位问题
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Firefox和Chrome中的绝对定位问题EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Firefox和Chrome中的绝对定位问题
EN