¿Error de 1 píxel de Firefox con colapso de borde, solución alternativa?

StackOverflow https://stackoverflow.com/questions/1035706

  •  10-07-2019
  •  | 
  •  

Pregunta

¿Hay alguna solución para el siguiente " 1 píxel a la izquierda " error? 

    <!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" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

Se ve así:

Error de Firefox CSS

¿Hay alguna solución CSS pura para esto?

Editar

No estaba muy claro acerca de mi mesa, así que aquí está de nuevo:

Con colapso de borde:

Error de Firefox CSS

Con espacio de celdas = " 0 " y sin colapsar el borde como se sugiere:

Error de Firefox CSS

Así que ahora los bordes dentro de mi mesa se duplican , pero quiero un borde de 1px en mi mesa.

Cuando elimino un borde de 1px de la tabla, termino con:

Error de Firefox CSS

Las fronteras todavía se duplican dentro de mi mesa.

Podría establecer solo el borde derecho e inferior para cada TD, TH y el borde izquierdo para cada primer hijo en TR para lograr lo que quiero, pero creo que hay una manera más simple.

¿Fue útil?

Solución

Elimine el colapso del borde y utilice el espaciado de celdas = 0 en su lugar. 

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

Ocurre porque cuando configura el colapso del borde: colapso, Firefox 2.0 coloca el borde al exterior del tr. Los otros navegadores lo ponen en el interior.

Establezca el ancho de sus bordes en 10px en su código para ver lo que realmente está sucediendo.

editar después de editar OP

Puede usar la tabla anterior "frontera" truco. Establecer el color de fondo sobre la mesa. Establezca el color td y th en blanco. Espaciamiento de usuario = 1; 

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>

Otros consejos

Para aquellos que prefieren mantener la presentación fuera del marcado, o que no tienen acceso al marcado, aquí hay una solución puramente CSS. Me encontré con este problema y probé esta solución en FF3.5, IE6, IE7, IE8, Safari 4, Opera 10 y Google Chrome. 

table { border-spacing: 0; *border-collapse: collapse; }

Esto establece la tabla para utilizar el espacio entre bordes en todos los navegadores (incluido el culpable, Firefox). Luego usa el hack de estrella CSS para presentar la regla de colapso de borde solo a IE, que no aplica correctamente el espaciado de borde (también puede incluir una hoja de estilo separada para IE con comentarios condicionales si no le gustan los hacks).

Si prefiere usar el espaciado entre celdas, utilícelo por todos los medios. Esto simplemente se ofrece como un método alternativo usando CSS.

Este problema ya no existe. En Firefox 47.0.1, el siguiente CSS no muestra el problema de un píxel: 

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

También podemos hacer que los bordes limpios de un píxel funcionen sin depender de una implementación funcional de border-collapse , como esta: 

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

¿Ves lo que está haciendo? El truco es que ponemos solo un borde superior e izquierdo en las celdas: 

 +------+------
 | cell | cell
 +------+------
 | cell | cell

Esto deja la tabla sin un borde derecho e inferior: los aplicamos a table 

+------+-------               |         +-------+------+ 
| cell | cell                 |         | cell  | cell |
+------+-------   +           |    =    +-------+------+
| cell | cell                 |         | cell  | cell |
|      |             ---------+         +-------+------+

El espacio entre bordes: 0 es esencial; de lo contrario, estas líneas no se conectarán.

tabla {espaciado de borde: 0; colapso del borde: colapso; } / * funciona en FF 3.5 * /

La mejor solución solo para CSS:

Añadir 

td {
    background-clip: padding-box
}

Más información: https://developer.mozilla.org/en -US / docs / CSS / background-clip

Gracias a @medoingthings 

table { border-spacing: 0; *border-collapse: collapse; }

no estaba funcionando para mí en FF 31. Como tengo diferentes colores para las celdas del cuerpo y del cuerpo, el truco del color de fondo de la tabla tampoco estaba funcionando. La única solución fue la siguiente: 

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}

No creo haber oído hablar de un " 1px al error izquierdo, " debe cargar su código en algún lugar para que podamos verificarlo y asegurarnos de que no sea un "Perdí algo en alguna parte". bug :) También te sugiero que revises tu marcado con Firebug para determinar si hay algo más que salga mal.

Me encontré con este problema, pero en mi caso tenía que ver con que la tabla se anidara dentro de un conjunto div para desbordarse: oculto. Eliminé esto y funcionó.

Me encontré con este problema y como una solución. Yo solía: 

table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}

básicamente engañó el borde usando un color de fondo. Lo que evitó así el doble de bordes interiores.

Mi solución es la siguiente.

  1. Eliminar border-collapse , border y border-spacing de CSS.

  2. Agregue este código JavaScript: 

    $('table tbody tr td').css('border-right', '1px solid #a25c17');
$('table tbody tr td').css('border-bottom', '1px solid #a25c17');
$('table tbody tr td:last-child').css('border-right', 'none');
$('table').css('border-bottom', '1px solid #a25c17');

Para ser honesto, no sé por qué funciona. Es jQuery magic.

Fui mordido por esto hoy. Las soluciones ofrecidas no me funcionaron, así que encontré la mía: 

table { border: 1px solid transparent; border-collapse: collapse; }

De esta manera, obtienes bordes contraídos, sin bordes dobles y todo dentro de los límites que deseas, sin reglas específicas del navegador. Sin inconvenientes.

También me he encontrado con este problema, la solución de prueba completa es muy simple en su asp: gridview simplemente agrega 

GridLines="None"

y las líneas desaparecen en Firefox sin necesidad de modificación de CSS.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top