IE 8 y 9 ignoran el ancho de div: ¿cómo hacer que funcione este ejemplo?

La siguiente página HTML parece rendir bien en cualquier navegador, pero el IE 8 & 9:IE 8 y 9 ignoran el ancho de div: ¿cómo hacer que funcione este ejemplo?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
</head> 
<body> 
    <div style="width: 300px"> 

     <span style="white-space: nowrap;"> 
      <input type="radio" value="1" name="test" />Choice 1 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="2" name="test" />Choice 2 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="3" name="test" />Choice 3 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="4" name="test" />Choice 4 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="5" name="test" />Choice 5 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="6" name="test" />Choice 6 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="7" name="test" />Choice 7 
     </span> 

    </div> 
</body> 
</html>

el código HTML parece bastante sencillo, pero IE 8 & 9 ignorar el ancho en el div y obliga a todas las opciones en el misma línea (IE 7 y todos los demás navegadores que no sean IE se ajustan a 300px como deberían). De alguna manera necesito esta lista de botones de radio para envolver a un ancho especificado sin separar la radio de la opción correspondiente.

Puedo obtener IE 8 & 9 comportarme si cambio el doctype, pero me gustaría evitar cambiar eso si es posible.

Obtengo el mismo comportamiento si utilizo las etiquetas "nobr" de la vieja escuela en lugar de las etiquetas span.

Fuente

2012-06-07 Troy

qué la adición de un 'display: inline-block; 'estilo a su div ayuda? –

siempre puede agregar float: left; clear: both; a los tramos – Rooster

debes elegir ";" en <div style="width: 300px;"> (buenas prácticas)

uso display: inline-block; en lugar de white-space: nowrap;

Fuente

2012-06-07 17:16:00

El último ';' en una declaración de estilo y en bloques CSS es opcional. – Knyri

Gracias por la respuesta rápida. "display: inline-block" hizo el truco. Sin embargo, el punto y coma no debería ser requerido al final de un estilo en línea, pero probablemente sea más limpio hacerlo de todos modos. – Troy

@Mayankswami Deberías actualizar tu primera declaración. No es cierto que IE 8 y 9 ignoren la declaración de estilo en línea en ausencia de un punto y coma de cierre. – Sampson

El problema es con las pestañas y saltos que tiene en su marcado. Le está pidiendo a IE que no se ajuste a esto, pero al mismo tiempo le pide a cada elemento que permanezca lo suficientemente estrecho para sentarse uno al lado del otro en el contenedor principal.

Se habrá dado cuenta de que si se quita el espacio en blanco, todos los navegadores muestran el marcado de la misma:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     div { 
     width: 300px; 
     border: 1px solid #333 
     } 
     span { 
     border: 1px solid red; 
     white-space: nowrap 
     } 
    </style> 
    </head> 
    <body> 
    <div> 
     <span><input type="radio" value="1" name="test" /> Choice 1</span> 
     <span><input type="radio" value="2" name="test" /> Choice 2</span> 
     <span><input type="radio" value="3" name="test" /> Choice 3</span> 
     <span><input type="radio" value="4" name="test" /> Choice 4</span> 
     <span><input type="radio" value="5" name="test" /> Choice 5</span> 
     <span><input type="radio" value="6" name="test" /> Choice 6</span> 
     <span><input type="radio" value="7" name="test" /> Choice 7</span> 
    </div> 
    </body> 
</html>

enter image description here

Fuente

2012-06-07 17:59:08 Sampson

Gracias por la respuesta. Sin embargo, la pregunta no era cómo conseguir que IE lo renderizara correctamente, la pregunta era cómo conseguir que IE lo renderizara correctamente ** con el doctype en la publicación original **, que su ejemplo no tiene. "display: inline-block", sugerido por Mayank, funciona tanto con su doctype como con el doctype original. – Troy

@TroyEvans: Cuando probé la publicación de Jonathan, html, indique su DocType ' ' todavía funcionaba en IE. Vea aquí para DEMO: http://jsfiddle.net/FranWahl/eHwm5/3/ – Nope

@TroyEvans Cambie el doctype; todavía funciona en IE. Sus instrucciones para IE fueron inconsistentes, el tipo de documento no es relevante aquí. – Sampson

IE 8 y 9 ignoran el ancho de div: ¿cómo hacer que funcione este ejemplo?

Respuesta

Cuestiones relacionadas