Firefox 和 Chrome 中的絕對定位問題

Question

我不明白為什么 FF 和 Chrome 以不同的方式呈現我的頁面。 這是它的屏幕截圖

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

這是一個鍍鉻的

鍍鉻：鍍鉻示例 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 圖像：

.remove-me {
  border:1px solid red;
  position:absolute;
  right:0;
  top:0;
}

這很奇怪。 我嘗試將字段集填充出來，圖像向上移動了一點，但仍然不在角落處。

這篇文章表明 FF 在渲染字段集方面確實存在問題。

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

有沒有更好的方法來修復而不使用瀏覽器特定的 hack？

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 包裝器，然后將元素絕對定位在包裝器的右上角，使其位於字段集的角上。

Answer 3

看起來 .remove-me 元素可能有邊距。 確保在向項目添加絕對定位之前刪除它。

為了獲得精確的結果，您應該始終在 CSS 中進行“重置”。 這意味着從每個元素中刪除邊距/填充。

一個簡單的重置：

* { margin: 0; padding: 0px; }

把它放在你的 CSS 的頂部。

Answer 4

我使用了 @media screen 和 (-webkit-min-device-pixel-ratio:0) {} 並以這種方式修復了我的絕對值。 它不是很干，但它有效。

Answer 5

我認為這是因為您沒有指明包含按鈕的 div (passenger-info) 的高度； 當您不指定此項時，Chrome 就會開始運行。

Answer 6

真正的解決方案是firefox，即不要為頂部、左側、右側和底部設置默認值。

我能夠通過正確設置這些來解決我的問題。

Answer 7

而不是使用邊距使用左，上，右，下。 例子：

position: absolute; top: 10px; left: 20px;

Answer 8

在 2020 年，針對 mozilla 的平台原生屬性之一使用功能查詢可能是正確的方法。 -moz-appearance 就是這樣的一種屬性，但其他屬性也可以。

@supports (-moz-appearance: none) {
 .remove-me {
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

Answer 9

我有一個網站和 Chrome 中的圖像錯誤的類似問題。 我在圖像和輸入框中的位置與本文開頭的示例相同，我通過在輸入框中放置絕對位置和在相對坐標中的圖像位置來解決它。

當我這樣做時，它改變了兩個頭寸，但在兩個頭寸中都有利潤。 我把它放在了我想要的地方，要使用 Firefox 和 Chrome 解決這個問題，您必須遵循其中的一些技巧才能將圖像放在正確的位置。 發揮位置以使其發揮作用。