Fuente monoespacial en IE8 ignora los espacios

Question

Estoy tratando de hacer que funcione una mesa asci monoespacada, como se ve aquí:u003Cpre>Etiqueta y CSS Font-Family

Esto funciona para mí en todos los navegadores, excepto IE8.

En IE8, todos los espacios se comprimen en un solo espacio. (Entonces las columnas desaparecen)

¿Alguna idea de por qué IE8 está haciendo esto?

Gracias por adelantado,

Alex

Answer 1

Agregar white-space:pre a su elemento para preservar los caracteres del espacio blanco.

Answer 2

El comportamiento predeterminado de HTML es comprimir múltiples espacios blancos a un solo espacio, a menos que se le diga explícitamente que no lo haga.

La forma de decirle que no haga esto es usar el CSS white-space propiedad. El valor que probablemente esté buscando es configurarlo white-space:pre;, que establecerá un elemento para mostrar todo el espacio en blanco sin comprimirlo.

Por supuesto, también puedes usar el <pre> etiqueta en sí, que tiene white-space:pre; Establecer por defecto. Tenga en cuenta que esto se puede anular en sus hojas de estilo, así que si un <pre> La etiqueta no funciona, esta es probablemente la razón. (Si esto está sucediendo, puede usar la ventana de herramientas de desarrollador para examinar los estilos que se aplican al elemento)

Además de white-space:pre;, hay un par de otros valores del white-space propiedad que también puede usar, según sus requisitos: pre-wrap y pre-line.

Puede obtener más información sobre las diferencias entre ellos, con ejemplos, aquí: http://www.quirksmode.org/css/whitaspace.html

Espero que ayude.

Answer 3

He intentado esto y funcionó ... (tal vez ayude) entonces, arregle el resto con estilos.

<svg width="600" height="150" font-family="monospace"  xml:space="preserve">
<defs>
<style type="text/css">
<![CDATA[ /* ADD CLASSES */
.font{text-anchor: start; font-size: 12px;font-weight: normal; font-family: "DejaVu Sans Mono", sans-serif;white-space: pre-wrap;}
]]>
</style>
</defs>