cromo vs FF/IE/Opera en el cálculo del ancho de la celda de la tabla? (table-layout: fixed)

He buscado ahora durante casi medio día ... pero no pude averiguar por qué chrome6/7 parece ser el único navegador en comparación con IE8/FF3.6/Opera que no agrega el relleno al ancho especificado de una celda de tabla.cromo vs FF/IE/Opera en el cálculo del ancho de la celda de la tabla? (table-layout: fixed)

Por supuesto, esto se convierte en crucial si se trabaja con table-layout: fijo, debido al hecho de que, de repente, tienen que prestar atención a los anchos especificados px.

Bien, finalmente mi pregunta: ¿Alguien sabe por qué Chrome calcula de manera diferente, y qué navegador es el correcto (estándar), y con suerte, ¿hay una solución elegante?

Por el momento, mi única solución sería un comentario condicional con un chrome.css donde agrego el relleno a la anchura manualmente ... escalofrío ...

(por cierto: cualquiera que se sienta la tentación de dicen que los anchos de píxeles no son webdeveloping adecuada ... no dude en dejar esta página silencio)

ADEMÁS: ( con respecto a los replys)
en primer lugar gracias por sus inmediatos replys .. . Intentaba hacerlo lo más corto posible, y allí para i reducido los hechos al mínimo ... pero, como usted ha mencionado, hay una gran cantidad de varibales en webdeveloping y por eso tratan de aclarar ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     div { width:300px; } 
     table { table-layout:fixed; width:100%; height:50px; } 
     td.col1 { width:20px; background-color:blue; } 
     td.col2 { width:40px; background-color:red; } 
     td.col3 { width:60px; background-color:yellow; } 
     td.col3 { width:auto; background-color:yellow; } 

     td { padding:5px; } 
    </style> 
</head> 
<body> 
    <div> 
     <table cellpadding="0" cellspacing="0"> 
      <tr> 
       <td class="col1"></td> 
       <td class="col2"></td> 
       <td class="col3"></td> 
       <td class="col4"></td> 
      </tr> 
     </table> 
    </div> 
</body>

ahora si mueve el css línea

td { padding:5px; }

en diferentes navegadores, verás que Chrome incluye el relleno, dentro de la anchura, mientras que los otros añaden que

esa es la esperanza ayuda a clarificar y gracias adv Ance
Berny

Fuente

2010-08-31 berny

¿Podría publicar un breve ejemplo que demuestre el problema que está viendo? –

¿Está suministrando un doctype válido? p.ej. renderizado en modo estándar. esto hace una diferencia significativa cuando se trata de controlar el renderizado. – scunliffe

Agregué algunas líneas a mi publicación original, espero que ayude a aclarar – berny

He intentado reproducir el problema, pero la siguiente se ve exactamente lo mismo para mí en Chrome 7 y Firefox 3.6:

<!DOCTYPE html> 
<style> 
table { table-layout: fixed; border: 1px solid black; } 
td { width: 5px; background: green; outline: 1px solid red; padding: 5px; } 
</style> 
<table> 
<tr><td></td><td></td></tr> 
</table>

para resolver su problema, le recomiendo que primero trate de añadir un doctype si aún no tiene uno. El uso de un tipo de documento activará el modo estándar, lo que significa que es más probable que el comportamiento sea consistente entre los navegadores. El que uso más arriba, <!DOCTYPE html>, es el doctype HTML5, pero en realidad funciona para activar el modo estándar en pretty much all browsers.

Si el modo de normas no lo ayuda a obtener una mayor coherencia, intente reducir su problema a un ejemplo mínimo; despoja de todo lo extraño, hasta que te quedes con solo lo suficiente para ver tu problema. El ejemplo que di más arriba muestra cuán mínimo quiero decir; suficiente marcado y estilo para poder ver fácilmente las tablas y compararlas entre los navegadores. Una vez que reduce a un ejemplo mínimo, puede ver el problema usted mismo, o si no, tendrá algo que puede publicar en un foro como StackOverflow y obtener respuestas mucho más útiles, ya que la gente no tiene que adivinar qué su problema es, o vagar por una página completa de HTML y CSS solo para encontrar el pequeño problema que usted mencionaba.

Fuente

2010-08-31 01:43:20

La razón es probablemente uno de los dos:

Ha configurado el atributo ancho de la tabla y de las celdas individuales, y los anchos totales de las células no es el mismo que el valor que ha asignado a la mesa; o
El ancho total de las celdas (y por lo tanto el ancho de la tabla) es mayor que el ancho del elemento contenedor (div). Si este es el caso, Chrome redistribuirá el ancho de las celdas por lo que se diferencian de su CSS.

En cuanto a su marcado, le sugiero que empiece estableciendo primero un valor real para td.col3 o elimine 'auto' y vea qué pasa.

Fuente

2010-11-12 12:46:55 boze

Tengo el mismo problema y, desafortunadamente, no encontré una solución real, pero encontré otros dos hilos, un informe de error + un problema.

Temas:

informe de error:

https://bugs.webkit.org/show_bug.cgi?id=13339

Solución posible: vea el segundo hilo.

Fuente

2011-06-19 13:03:02 user805346

Para table-layout: fijo con CSS:

td { width: 150px; padding: 5px; }

siguiente muestra el resultado (Izquierda: Cromo; Derecha: Firefox): [stackoverflow no me permite a publicar la imagen .. todavía]

Chrome: 5-140-5 Firefox: 5-150-5

Sugerencia/Solución: tratar de no utilizar el relleno en la capa td. Envolver su contenido dentro td con un elemento div/span:

span.column_wrap 
{ 
    padding: 0 3px; 
    display: block; 
    line-height: 26px; 
} 

<td><span class="column_wrap">content here</span></td>

Fuente

2011-09-20 08:40:04

Después de este error, así me di cuenta de que en Chrome, si se agrega la altura de la fila de la tabla (por ejemplo, el título de la mesa) a 40, a continuación, agregue 5 relleno a toda la tabla, la altura de la fila de la tabla ahora se convierte en 45. Esto no ocurre en Firefox.

Por lo tanto, con el fin de solucionar este problema, puse la altura de esa fila en css y ha añadido 0 padding:

.title { 
    height: 45px; 
    padding: 0px; 
}

En la fila de tabla que incluye el título de la tabla, a continuación, añadir el relleno a la mesa. Ahora puedo tener una altura de 45px + relleno de 10px con la fila del título permaneciendo en 45px (en lugar de convertirme en 55).

Fuente

2012-09-30 10:40:02 lonewulf

cromo vs FF/IE/Opera en el cálculo del ancho de la celda de la tabla? (table-layout: fixed)

Respuesta

Cuestiones relacionadas