Pomoc w debugowaniu CSS - pusty div zwijanie

Następujący kod HTML pochodzi ze strony aspx. Jest to w odniesieniu do pierwszego elementu DIV dziecka. W IE7 HTML renderuje się tak, jak oczekiwałbym, nawet gdy ten element DIV jest pusty. Powinien on wynosić około 1/3 szerokości rodzica, ale w FireFox jest zwinięty do zera szerokości. Wszystkie 3 elementy div są unoszone w lewo. Tak czy inaczej, moje pytanie brzmi: jak zachować pustą szerokość DIV na poziomie 32% w FireFox, a najlepiej Safari, Opera i Chrome. Mam nadzieję, że poprawka rozwiąże problem we wszystkich przeglądarkach. Bez wątpienia przyczyną jest mój brak wiedzy na temat CSS połączony z prawdopodobnie nieprawidłowym renderowaniem IE7. Prawdopodobnie zachowuje się poprawnie. Czy ktoś może mi pomóc rozwiązać ten problem?Pomoc w debugowaniu CSS - pusty div zwijanie

<div style="padding-left: 4px ! important; overflow: auto; width: 96% ! important;" class="fullwidthdiv"> 

      <div style="width: 32% ! important;" class="oneThirdColumn"></div> 

      <div style="width: 32% ! important;" class="oneThirdColumn"> 
      $<input type="text" style="width: 70px;" class="underlinedTextBox updateReserveAmount" tabindex="123" id="ctl00_DefaultContent_payment1_paymentfrmView_updateReserveAmount" maxlength="11" name="ctl00$DefaultContent$payment1$paymentfrmView$updateReserveAmount"> 
      </div> 
      <div style="width: 32% ! important;" class="oneThirdColumn"> 
      <input type="submit" style="width: 120px;" class="updateReserve" tabindex="124" id="ctl00_DefaultContent_payment1_paymentfrmView_btnReserve" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$DefaultContent$payment1$paymentfrmView$btnReserve&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" value="Update Reserve" name="ctl00$DefaultContent$payment1$paymentfrmView$btnReserve"> 
      </div> 
    </div>

Źródło

2010-02-06 Hcabnettek

są div dzieci umieścić tam dynamicznie? Czy możesz dodać coś do stylu pierwszego div, gdy jest pusty? –

firebug ftw https://addons.mozilla.org/en-US/firefox/addon/1843 – gingerbreadboy

To nie szerokość jest problemem, to wysokość.

Jeśli nie masz zawartości w dziale div, jej wysokość zmieni się na zero. Istnieje jednak dobrze znany błąd w IE, w którym zawartość wszystkich elementów ma co najmniej jedną postać.

Możesz określić wysokość div, lub możesz umieścić w nim  , gdy nie masz nic więcej do umieszczenia.

Źródło

2010-02-06 11:19:17 Guffa

To załatwiło sprawę. Dzięki za pomoc! – Hcabnettek

Podejrzewam, że to z powodu pływaka. Czy możesz je ustawić zamiast je unieść? Ale to prawdopodobnie sprawi, że IE będzie nieszczęśliwy, nie podoba ci się wbudowywanie elementów bloków. Być może zamiast tego są span s, które są display: inline-block?

Źródło

2010-02-06 11:04:09

Oczywiście, gdyby ludzie po prostu używali tabel w układzie takim, jak zamierzał Bóg ... * kaczki i biegi * –

@TJ: Ty myślisz, że Bóg wymyślił układ oparty na stole? To była druga największa sztuczka diabła ...;) – Guffa

@Guffa: Z * największą sztuczką będącą ... CSS? ;-) –

wiem, że to jest trochę stary, ale to, co zrobiłem było dodać styl min-height tak:

.oneThirdColumn { 
    min-height: 1em; 
}

Źródło

2012-04-19 18:58:31

1em jest dość dużą wartością domyślną. Co powiesz na 'min-height: 1px;'? – AlexStack

Używam padding-top: (insert number)px or % aby moje puste elementy z zawaleniem. Wydaje się działać dobrze.

Źródło

2015-05-31 00:13:57

Miałem podobny problem z <span> w FireFox (co najmniej 47.0.2 i 50).

Naprawiono za pomocą następujących CSS: span:empty:before {content: '\a0';}.

To by dodać jeden   przed <span> zawartość jeśli tylko pusty i nie wpływa na układ elementów, które mają jakiś tekst lub dzieci.

Źródło

2016-11-22 12:36:10

Pomoc w debugowaniu CSS - pusty div zwijanie

Odpowiedz

Powiązane problemy