CSS：Firefox中按鈕的絕對定位

我想顯示一個按鈕，它將自己絕對定位的父級的所有空格。（所有在Chrome和Safari（Webkits）中運行完美，我無法在IE上測試，因爲我在Mac上（如果任何人都可以測試並在評論中說，如果它運行與否，這將是非常好的））。CSS：Firefox中按鈕的絕對定位

的目標實現的是：

enter image description here

股利和按鈕一起由包裹這是絕對定位含有。

的HTML代碼是：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      .wrapper { 
       background-color: red; 
       position: absolute; 
       width: 100px; 
       height: 100px; 
      } 

      .inner { 
       background-color: blue; 
       position: absolute; 
       top: 0px; 
       bottom: 0px; 
       left: 0px; 
       right: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="wrapper" style="top: 50px; left: 50px;"> 
      <div class="inner">div</div> 
     </div> 

     <div class="wrapper" style="top: 50px; left: 200px;"> 
      <button class="inner">button</button> 
     </div> 
    </body> 
</html>

這是相當簡單的。問題是，在Firefox，它呈現這樣的：

enter image description here

你有火狐爲什麼呈現此代碼這樣任何想法和你有使用類似定位的任何解決方法嗎？

編輯：我不能（我不想）設置內部孩子的寬度和高度。原因是我使用GWT和佈局機制。 GWT佈局使用bottom/top/left/right來定位和調整元素的大小，所以我無法改變這種行爲。所有運行與經典div。問題只與按鈕有關。

來源

2011-09-01 Jerome Cance

有你嘗試設置顯示：塊？ –

是的，我在你問之前就已經測試過了。它什麼都不做 –

它呈現這樣的原因是，<button>是替換元素至少在Gecko和用於替換元素是什麼left: 0; right: 0意味着CSS規則是不同的比他們的非替換元素...

來源

2011-09-02 20:44:09

好的，替換元素似乎是這個問題的原因。謝謝！關於替換元素的更多信息：http://reference.sitepoint.com/css/replacedelements –

這是問題的解釋，有沒有解決這類問題的方法？（我更喜歡使用按鈕，因爲它將中間的文字對齊）。 –

你可以使用'left：0;寬度：100％;' –

還設置內部div的寬度和高度。

來源

2011-09-01 14:12:58

我不能使用寬度或高度，因爲我使用GWT的佈局機制，它使用底部/頂部/左/右設置尺寸 –

@Jerome：輸入'width：100％'和'height： 100％'比'右：0'和'bottom：0'？ – Wabbitseason

試試「float：left;」而不是「位置，頂部，底部，左側，右側」。 –

嘗試增加

min-width: -moz-available;

到.inner聲明。

我發現它甚至可以在Internet Explorer 7+中運行。在IE6中它失敗了，但這並不令人意外。不幸的是，它也在Opera中與Firefox最初的方式失敗。

來源

2011-09-01 14:39:15 Wabbitseason

這解決了Firefox中的問題。沒有人關心歌劇，因爲歌劇是100％未使用（至少在我的網站），並轉向webkit！ –

CSS：Firefox中按鈕的絕對定位

回答

相關問題