Otra pregunta de "IE está haciendo algo diferente de otros navegadores" pero esta es una poco inusual en que IE7 hace lo correcto pero IE 8 y 9 no.Elementos que no se ajustan como se esperaba en IE 8/9
Aquí está la situación, tengo un diseño simple de 3 columnas. Las primeras 2 columnas son de ancho fijo y la tercera quiero que sean de ancho variable para que ocupen el espacio disponible.
Estoy enviando datos de texto en la tercera columna. Los datos de texto deben estar libres para envolver al final de un valor/frase de datos, así que lo elaboro como.
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
(Véase el ejemplo de abajo también)
todo funciona como un encanto en FF, Chrome y Internet Explorer 7, pero Internet Explorer 8 y 9 tratan a los nowrap consecutiva se extiende como 1 elemento grande nowrap (es decir, se pone todo los valores en una línea). Hay espacio en blanco entre los tramos y eso (IMO) debe ser libre para envolver. La única manera en que puedo hacer que IE8/9 se ajuste como quiero es incluir algún espacio no blanco entre los tramos que se envían.
Esta solución está bien, pero tengo curiosidad por saber:.
- Es IE prestando el marcado correcta o incorrectamente (es decir, es mi expectativa de que los valores deben envolver incorrecta sólo por sentado que el IE tiene la culpa porque los otros navegadores lo hacen de manera diferente)
- ¿Existe una solución más elegante que la que tengo? En un mundo ideal, me gustaría asegurarme de que la coma separadora nunca se enganche al comienzo de una nueva línea.
Gracias de antemano
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<style type="text/css">
.leftBit {float:left; margin-right: 10px; background-color: yellow;}
.middleBit {float:left; width:305px; margin-right: 10px; background-color: orange;}
.remainder {margin-left: 420px; min-width: 200px;background-color: #DDD;}
.nowrap { white-space:nowrap;}
.clear {clear: both;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">This value wraps - but I want to keep the values on the same line</div>
<div class="remainder">
<span>Blue the colour of the sea and the sky, </span>
<span>Green green green green of home, </span>
<span>Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">I don't know why these values do not wrap? They do in FF and chrome and IE7 but not IE8/9</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky, </span>
<span class="nowrap">Green green green green of home, </span>
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">Here is my "work around" - I have to include some non-whiite space between the "nowrap" elements. Is this a bug or expected behaviour?</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky </span> ,
<span class="nowrap">Green green green green of home </span> ,
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<hr />
</form>
</body>
</html>
Gracias por el consejo sobre el espacio de ancho cero. Estoy en desacuerdo sobre el espacio entre los elementos html que se debe ignorar: ¿está esto especificado en html spec/rfc? Si es así, por favor enlace. Pero ningún navegador que conozco ignora los espacios entre los elementos - es decir, Foo barra producirá "barra Foo" cuando se procesa y no "Foobar" –
Dondequiera que mi cerebro haya obtenido ese detalle (circa 1999) no puedo encontrar en Internet ahora. He ajustado el texto anterior para referirme a los problemas generales relacionados con la definición de los saltos de palabras. – nosilleg