css - predeterminar - modo de documento emulador internet explorer
IE 8 y 9 ignoran el ancho de div: ¿cómo hacer que funcione este ejemplo? (2)
La siguiente página html parece estar bien en cualquier navegador, excepto IE 8 y 9:
<!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 html parece bastante directo, pero IE 8 y 9 ignoran el ancho en el div y fuerzan todas las elecciones en la misma línea (IE 7 y todos los otros 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 lograr que IE 8 y 9 se comporten si cambio el tipo de documento, sin embargo, me gustaría evitar cambiar eso si es posible.
Obtengo el mismo comportamiento si uso las etiquetas "nobr" de la vieja escuela en lugar de las etiquetas span.
El problema es con las pestañas y líneas nuevas que tienes en tu 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.
Notará que si elimina el espacio en blanco, todos los navegadores hacen que el marcado sea el mismo:
<!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>
debes poner " ; " en <div style="width: 300px;"> (buena práctica)
display: inline-block uso display: inline-block ; en lugar de white-space: nowrap;