¿Cómo ignorar el espacio en blanco adicional en Google Chrome en una fila de la tabla alineada a la derecha?

Tengo una tabla con celdas alineadas a la derecha que se genera en el lado del servidor. Cada línea dentro de una celda es opcional, por lo que se incluye en una declaración if-then en el lado del servidor.¿Cómo ignorar el espacio en blanco adicional en Google Chrome en una fila de la tabla alineada a la derecha?

El html de muestra muestra 3 columnas, donde la primera columna es defectuosa en Google Chrome. Columnas 2 & 3 son correctas, aunque extrañas, porque el html es el mismo, excepto las nuevas líneas y los espacios en blanco.

Cuando miramos la primera columna en Google Chrome notará que el margen derecho no se alinea al 100% para cada línea dentro de la celda.

Este problema no existe en Firefox o IE, solo en Google Chrome.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    </head> 
    <body> 
     <table border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #000000;"> 
      <tbody> 
       <tr> 
        <td style="text-align: right;border: 1px solid #000000;"> 
         <span>Not Ok in Google Chrome</span> 
         <br /><span id="C1">500.000,00 €</span> 
         <br /><span id="C2">166.666,67 €</span> 
         <br /><span id="C3">489.545,90 €</span> 
        </td> 
        <td style="text-align: right;border: 1px solid #000000;"> 
         <span>Ok in Google Chrome</span><br /> 
         <span id="D1">500.000,00 €</span><br /> 
         <span id="D2">166.666,67 €</span><br /> 
         <span id="D3">489.545,90 €</span> 
        </td>    
        <td style="text-align: right;border: 1px solid #000000;"> 
         <span>Ok in Google Chrome</span><br /><span id="D1">500.000,00 €</span><br /><span id="D2">166.666,67 €</span><br /><span id="D3">489.545,90 €</span> 
        </td>      
       </tr> 
      </tbody> 
     </table> 
    </body> 
    </html>

Generar el html de una manera diferente no es una opción.

¿Cómo puedo hacer que esto funcione en Google Chrome, no cambiando el html, pero tal vez estableciendo un estilo extra o algo así?

Fuente

2011-05-11 Linefeed

Simplemente cambie el código HTML.

¿Qué tan difícil puede ser? ¿Por qué no puedes cambiarlo?

Esto funciona sin cambiar el código HTML, pero es un poco tonto:

td span { 
    display: block 
} 
td br { 
    display: none 
}

Su código original:http://jsbin.com/ipaca5
Con mi dosis:http://jsbin.com/ipaca5/2

Fuente

2011-05-11 09:55:38 thirtydot

Impar Parece que un retorno de carro antes de la BR se considera un espacio en blanco significativo y, por lo tanto, se incluye como un espacio literal. Supongo que es por eso que esto funciona (porque el espacio en blanco entre los elementos de nivel de bloque se vuelve insignificante) pero no puedo por mi vida pensar por qué sería eso y estaría bastante seguro de decir que no creo que haya será un método fácil de CSS para deshacerse de esto. – Chris

No podría formularlo mejor. Un BR que se considera un espacio en blanco significativo y, por lo tanto, se incluye como espacio literal, me suena como un error en el motor de renderizado de Google Chrome. No ? – Linefeed

@Linefeed: acepto, y he aquí un informe de error similar: http://code.google.com/p/chromium/issues/detail?id=40634 – thirtydot

Dado que cada uno de los navegadores maneja HTML de diferentes maneras (vea el modo peculiar) necesitará usar CSS para cambiar el estilo de la página. Para mantener el mismo aspecto sobre todos (o tantos como sea posible) sugiero comenzar con un restablecimiento de CSS como el Reset Reloaded de Eric Meyer. Luego puede establecer los estilos de la manera que desee desde allí.

Fuente

2011-05-11 09:52:08 Neil

Incluso con un CSS restablecer el problema Se mantiene igual. Indicar qué tipo de estilos debería establecer sería una gran respuesta a mi pregunta. – Linefeed

Está bien, sin saber que el CSS que está usando lo que probablemente quiera es ajustar la propiedad text-align para la (s) celda (s) en cuestión. Sin embargo, también se verá afectado por el relleno, por lo que también puede ser necesario ajustarlo. W3 tiene una gran documentación sobre tablas aquí: http://www.w3.org/TR/CSS2/tables.html – Neil

la pregunta tiene todo lo que necesita para reprogramar el problema, por lo que no necesita saber más sobre el CSS . – Chris

¿Cómo ignorar el espacio en blanco adicional en Google Chrome en una fila de la tabla alineada a la derecha?

Respuesta

Cuestiones relacionadas