Firefox bug 1 pixel com border-collapse, solução alternativa?

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

  •  10-07-2019
  •  | 
  •  

Pergunta

Existe alguma solução para o seguinte "1 pixel para a esquerda" bug? 

    <!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>

Parece que este:

Firefox CSS bug

Existe alguma solução CSS puro para isso?

Editar

Eu era pouco claro sobre a minha mesa para que aqui está ele novamente:

Com border-collapse:

Firefox CSS bug

Com cellspacing = "0" e sem border-collapse como sugerido:

Firefox CSS bug

Então, agora as fronteiras dentro da minha mesa são dobrou , mas eu quero fronteira 1px em toda a minha mesa.

Quando eu remover fronteira 1px a partir do final da tabela I com:

Firefox CSS bug

Borders ainda são dobrados dentro da minha mesa.

Eu poderia definir apenas direita e borda inferior para cada TD, TH e borda esquerda para cada primeira criança na TR para conseguir o que eu quero, mas eu acho que há uma maneira mais simples?

Foi útil?

Solução

Remova o border-collapse e uso cellspacing = 0 em vez. 

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

Isso acontece porque quando você definir border-collapse: colapso, puts Firefox 2.0 a fronteira para o lado de fora do tr. Os outros navegadores colocá-lo no interior.

Defina suas larguras de fronteira para 10px em seu código para ver o que está realmente acontecendo.

Editar após editar OP

Você pode usar a tabela velho truque "fronteira". Defina a cor de fundo sobre a mesa. Defina o td e th cor para branco. Usuário cellspacing = 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>

Outras dicas

Para aqueles que preferem manter a apresentação fora do markup, ou que não têm acesso à marcação, aqui é uma solução puramente CSS. Apenas corri para este problema sozinho, e testou esta solução em FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, e Google Chrome. 

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

Isto define a tabela para usar border-spacing em todos os navegadores (incluindo o culpado, Firefox). Em seguida, ele usa o hack estrela CSS para apresentar a regra border-collapse apenas para o IE, que não se aplica adequadamente border-spacing (você também pode incluir uma folha de estilo separada para IE com comentários condicionais, se você não gosta hacks).

Se você preferir usar células-spacing, por todos os meios usá-lo. Isto é simplesmente oferecido como um método alternativo utilizando CSS.

Esse problema não existe mais. No Firefox 47.0.1, o seguinte CSS não apresentam o problema de um pixel: 

table {
  border-collapse: collapse;
}

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

Nós também pode obter fronteiras um pixel limpas para o trabalho sem depender de um trabalho de implementação border-collapse, como este: 

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;
}

Você vê o que está fazendo? O truque é que nós colocamos apenas uma parte superior e borda esquerda nas células: 

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

Isso deixa a mesa sem um direito e borda inferior: nós denominar aqueles em table 

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

O border-spacing: 0 é essencial caso contrário, estas linhas não irá se conectar.

table {border-spacing: 0; fronteira-colapso: colapso; } / * Obras em FF 3.5 * /

Melhor CSS única solução:

Adicionar 

td {
    background-clip: padding-box
}

Mais informações: https://developer.mozilla.org/en -US / docs / CSS / background-clip de

Graças a @medoingthings 

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

não estava funcionando para mim em FF 31. Desde que eu cores diferentes para células thead e tbody o truque background-color mesa não estava trabalhando, também. A única solução era o seguinte: 

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;
  }
}

Eu não acho que eu já ouvi falar de um "1px para o bug esquerda", você deve enviar o seu em algum lugar do código para que possamos verificá-lo e certifique-se que não é um "eu perdi alguma coisa em algum lugar" bug :) I também gostaria de sugerir que atravessa sua marcação com Firebug para determinar se há alguma coisa errado mais acontecendo.

Eu corri para este problema - mas no meu caso tinha a ver com a tabela que está sendo aninhada dentro de um conjunto div para overflow: hidden. Tirei isso e funcionou.

Ran sobre esta questão e, como um trabalho em torno. Eu usei: 

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

basicamente enganado a fronteira usando uma cor de fundo. Que, assim, impedido bordas duplas dentro.

A minha solução é a seguinte.

  1. Remover border-collapse, border e border-spacing de CSS.

  2. Adicione 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, eu não sei por que ela funciona. É jQuery magia.

eu fui mordido por isso hoje. As soluções alternativas oferecidas não funcionou para mim, então eu encontrei minha própria: 

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

fronteiras Dessa forma, você se desmoronou, há bordas duplas, e tudo dentro dos limites que você deseja, sem regras específicas dos browser. Não há desvantagens.

Eu também executar para esse problema a solução plena prova é muito simples em sua asp: gridview basta adicionar 

GridLines="None"

e as linhas desaparecem no Firefox nenhuma modificação css necessário.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top