CSS：Firefoxのボタンの絶対配置

自分自身が絶対配置されている親のすべてのスペースを取るボタンを表示したいと思います。CSS：Firefoxのボタンの絶対配置

Firefoxにはバグがあります（すべてChromeとSafari（Webkits）で完璧に動作します。私はMac上にいるのでIEでテストできません。誰でもテストしてコメントできます実行されるかどうか、それは本当に素晴らしいだろう））。

達成するための目標である：

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>

。

enter image description here

あなたはFirefoxがこのようにこのコードをレンダリングする理由を任意のアイデアを持っているとあなたが同様の配置を使用して、任意の回避策を持っている：問題は、Firefox上で、それはこのようレンダリングするのですか？

EDIT：内側の子供の幅と高さを設定することはできません。その理由は、私はGWTをレイアウトメカニズムと共に使用しているからです。 GWTレイアウトは、下/上/左/右を使用して要素の位置とサイズを設定するので、この動作を変更することはできません。クラシック部門のすべてのラン。問題はボタンに関連しているだけです。

出典

2011-09-01 Jerome Cance

のためのものよりも異なっているということですようにそれをレンダリングする理由あなたは設定を表示しようとしました：ブロック？ –

はい質問する直前にテストしました。それは何もしません –

これは<button>が少なくともヤモリで置き換え要素であり、置換要素のCSSに何を意味するのかleft: 0; right: 0上の規則は、彼らが非置換要素...

出典

2011-09-02 20:44:09

ok、置き換えられた要素がこの問題の原因と思われます。ありがとう！置き換えられた要素に関する追加情報：http://reference.sitepoint.com/css/replacedelements –

これは問題の説明です。この種の問題に対する解決策はありますか？（私は中央のテキストを整列させるので、ボタンを使うことを好む）。 –

あなたは 'left：0;幅：100％; ' –

内側のdivの幅と高さも設定します。 .inner宣言に

min-width: -moz-available;

を追加

出典

2011-09-01 14:12:58

サイズを設定するために下端/上端/左端/右端を使用するGWTレイアウト機構を使用しているため、幅や高さを使用できません –

@Jerome： 'width：100％'と 'height： 100％ 'right：0'と' bottom：0'より？ – Wabbitseason

「float：left;」を試してください。 .innerの中で "position、top、bottom、left、right"の代わりに。 –

してみてください。

私はInternet Explorer 7以降でも動作することがわかりました。 IE6では失敗しますが、それは驚くことではありません。残念なことに、それはまた、Operaで元々Firefoxでのやり方と同じように失敗します。

出典

2011-09-01 14:39:15 Wabbitseason

これはfirefoxの問題を修正します。オペラは100％未使用（少なくとも私のサイトでは）で、Webkitに移行して以来、誰もオペラを気にしていません！ –

CSS：Firefoxのボタンの絶対配置

答えて

関連する問題