2011-09-01 30 views
8

Chcę wyświetlić przycisk, który zajmuje wszystkie spacje jego rodzica, który sam jest pozycją absolutną.CSS: bezwzględne umieszczenie przycisku w przeglądarce Firefox

Wygląda jednak na to, że Firefox ma błąd (wszystko działa idealnie w Chrome i Safari (Webkity), nie mogę przetestować na IE, ponieważ jestem na Macu (jeśli ktoś może przetestować i powiedzieć w komentarzu, czy to działa lub nie, byłoby naprawdę fajnie)).

Celem do osiągnięcia jest:

enter image description here

strefa i przycisk są ze sobą zawarte w opakowaniu, które jest absolutna ustawione.

Kod HTML jest:

<!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> 

To całkiem proste. Problemem jest to, że na Firefoksie, to czyni tak:

enter image description here

Jeżeli masz jakiś pomysł, dlaczego Firefox renderuje ten kod takiego i masz żadnego obejścia przy użyciu podobnych pozycjonowanie?

EDYCJA: Nie mogę (i nie chcę) ustawić szerokość i wysokość na wewnętrznym dzieckiem. Powodem jest to, że używam GWT z mechanizmami układu. Układ GWT używa elementów bottom/top/left/right do pozycjonowania i rozmiaru elementów, więc nie mogę zmienić tego zachowania. Wszystkie biegi z klasycznym div. Problem dotyczy tylko przycisku.

+0

Have próbowałeś ustawić wyświetlanie: blok? –

+0

Tak, przetestowałem tuż przed zapytaniem. Nie ma nic do roboty. –

Odpowiedz

3

Powodem renderuje jak to jest, że <button> jest zastąpiony elementem przynajmniej w Gecko i dla elementów zastępowanych reguły na co left: 0; right: 0 oznacza w CSS są inne niż w przypadku elementów spoza zastąpione ...

+1

ok, zastąpione elementy wydają się być przyczyną tego problemu. Dzięki ! Dodatkowe informacje na temat elementów zastępowanych: http://reference.sitepoint.com/css/replacedelements –

+0

To jest wyjaśnienie problemu. Czy istnieje rozwiązanie tego problemu? (Wolę używać przycisków, ponieważ wyrównuje tekst w środku). –

+0

Możesz użyć 'left: 0; szerokość: 100%; ' –

3

Ustaw także szerokość i wysokość wewnętrznego elementu div.

+0

Nie mogę użyć szerokości ani wysokości, ponieważ używam mechanizmu układu GWT, który używa bottom/top/left/right do ustawienia rozmiarów –

+1

@Jerome: Jak trudno jest wpisać 'width: 100%' i 'height: 100% 'niż' right: 0' i 'bottom: 0'? – Wabbitseason

+0

Spróbuj "float: left;" zamiast "position, top, bottom, left, right" w .inner. –

6

spróbuj dodać

min-width: -moz-available; 

do deklaracji .inner.

Znalazłem, że działa nawet w Internet Explorerze 7+. W IE6 nie działa, ale nie jest to niespodzianką. Niestety, w przeglądarce Opera nie działa tak, jak w Firefoksie.

+1

Rozwiązuje to problem w firefox. Nikomu nie zależy na operze, bo opera jest w 100% nieużywana (przynajmniej na mojej stronie) i przenosi się do webkita! –

Powiązane problemy