CSS: Firefox'ta bir düğmenin mutlak konumlandırılması

Kendisinin mutlak olarak konumlandırılmış olan tüm alanlarını alan bir düğme görüntülemek istiyorum.CSS: Firefox'ta bir düğmenin mutlak konumlandırılması

Ancak Firefox'un onunla bir sorunu var gibi görünüyor (Tüm Chrome ve Safari'de mükemmel çalışır) (Webkits), IE'de test yapamıyorum çünkü ben macdayım (eğer birisi yorumda test edip yorum yapabilirse) çalışır ya da değil, gerçekten güzel olurdu)). elde etmek için

hedef:

enter image description here

Div ve düğme birlikte konumlandırılmış mutlak bir sargı tarafından ihtiva edilmektedir.

HTML kodu aşağıdadır:

oldukça basit

<!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 böyle bu kodu oluşturur neden haberin var mı ve benzer konumlandırma kullanarak herhangi geçici çözümü var: Sorun Firefox üzerinde, bu gibi kılmasıdır?

DÜZENLEME: İç çocukta genişlik ve yükseklik ayarlayamıyorum (ve istemiyorum). Nedeni, GWT'yi düzen mekanizmaları ile kullanıyorum. GWT düzeni, öğeleri konumlandırmak ve boyutlandırmak için alt/üst/sol/sağ kullanır, dolayısıyla bu davranışı değiştiremiyorum. Tüm klasik div ile çalışır. Sorun sadece düğme ile ilgili.

kaynak

2011-09-01 Jerome Cance

var olmasıdır Görüntü ayarlamayı denediniz mi? –

evet Sormadan hemen önce test ettim. –

böyle kılan sebebi <button> en az left: 0; right: 0 CSS ne anlama kuralları onlar yerleştirilmeyen elemanlar için olandan farklıdır Gecko ve değiştirilen elemanlar için değiştirilen eleman ...

kaynak

2011-09-02 20:44:09

tamam, değiştirilen öğeler bu sorunun nedeni gibi görünüyor. Teşekkürler ! Değiştirilen öğeler hakkında ek bilgi: http://reference.sitepoint.com/css/replacedelements –

Bu sorunun açıklanması, Bu tür bir sorun için çözüm var mı? (Metni ortadaki metni hizaladıkça düğmelerini kullanmayı tercih ederim). –

'left kullanabilirsiniz: 0; genişlik:% 100; ' –

Ayrıca iç div için bir genişlik ve yükseklik ayarlayın.

kaynak

2011-09-01 14:12:58

hiçbir şey yapmıyor Genişlik veya yükseklik kullanamıyorum çünkü boyutları ayarlamak için alt/üst/sol/sağ kullanan GWT düzeni mekanizmasını kullanıyorum –

@Jerome: Genişlik:% 100 've' height: yazmak daha zor % 100'den sağa: 0' ve 'dip: 0'? – Wabbitseason

"Float: left;" seçeneğini deneyin. .inner içinde "konum, üst, alt, sol, sağ" yerine. –

deneyin .inner ilanına

min-width: -moz-available;

ekledi.

Internet Explorer 7 + 'da çalıştığı görüldü. IE6'da başarısız oluyor ama bu bir sürpriz değil. Maalesef, Opera'da da Firefox’ta tam olarak yaptığı gibi başarısız oluyor.

kaynak

2011-09-01 14:39:15 Wabbitseason

Bu, sorunu firefox'ta düzeltir. Operanın% 100 kullanılmadığı (en azından sitemde) ve web grubuna geçtiğinden beri opera hakkında hiç kimse umursamıyor! –

CSS: Firefox'ta bir düğmenin mutlak konumlandırılması

cevap

İlgili konular