Ayuda de depuración de CSS: colapso de div vacío

El siguiente HTML es de una página aspx. Esto se refiere al primer elemento DIV secundario. En IE7 el HTML se representa como esperaría incluso cuando ese elemento DIV esté vacío. Debería tener aproximadamente 1/3 del ancho de su elemento primario, pero en FireFox se está contrayendo a un ancho cero. Los 3 divs flotan a la izquierda. De todos modos, mi pregunta es cómo puedo mantener el ancho del DIV vacío al 32% en FireFox al menos, y preferiblemente Safari, Opera y Chrome. Espero que la solución corrija el problema en todos los navegadores. No cabe duda de que la causa es mi falta de conocimiento de CSS combinado con la probable interpretación incorrecta de IE7. Probablemente se está comportando correctamente. ¿Alguien puede ayudarme a corregir este problema?Ayuda de depuración de CSS: colapso de div vacío

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

Fuente

2010-02-06 Hcabnettek

¿Los elementos secundarios para niños se colocan de forma dinámica? ¿Puedes agregar algo al estilo del primer div cuando está vacío? –

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

No es el ancho el problema, es la altura.

Si no tiene ningún contenido en el div, la altura se vuelve cero. Sin embargo, existe un error bien conocido en IE, donde hace que el contenido de todos los elementos tenga al menos un carácter alto.

Puede especificar una altura para el div, o puede poner un   en él cuando no tenga nada más para poner allí.

Fuente

2010-02-06 11:19:17 Guffa

Esto hizo el truco. ¡Gracias por la ayuda! – Hcabnettek

Sospecho que es por el flotador. ¿Puedes hacerlos display: inline-block en lugar de ponerlos en flotación? Pero eso probablemente hará que IE no esté contento, no le gusta que inserte elementos de bloque. ¿Quizás span s que son display: inline-block en su lugar?

Fuente

2010-02-06 11:04:09

Por supuesto, si las personas simplemente usan tablas para el diseño como Dios lo intentó ... * patos y carreras * –

@TJ: Usted ¿Crees que Dios inventó el diseño basado en tablas? Fue el segundo truco más grande del diablo ...;) – Guffa

@Guffa: ¿Con * el * truco más grande es ... CSS? ;-) –

Sé que esto es un poco viejo, pero lo que hice fue añadir un estilo min-height así:

.oneThirdColumn { 
    min-height: 1em; 
}

Fuente

2012-04-19 18:58:31

1em es un valor por defecto bastante grande. ¿Qué tal 'min-height: 1px;'? – AlexStack

He estado usando padding-top: (insert number)px or % a mantener los elementos vacíos se colapse. Parece estar funcionando bien.

Fuente

2015-05-31 00:13:57

Tuve un problema similar con <span> en FireFox (al menos 47.0.2 y 50).

Solucionado con el siguiente CSS: span:empty:before {content: '\a0';}.

que añadiría una   antes <span> contenidos si está vacío solamente y no afectaría a la disposición de los elementos que tienen algún texto o niños.

Fuente

2016-11-22 12:36:10

Ayuda de depuración de CSS: colapso de div vacío

Respuesta

Cuestiones relacionadas