célula da tabela e borda exibindo diferentemente em IE / Chrome e Firefox / Opera

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

  •  22-08-2019
  •  | 
  •  

Pergunta

Depois de várias horas de frustração finalmente virou-se para a internet para a resposta. Imagine que esta peça extremamente simples de código: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>AARRRRRRGH</title>
    </head>
    <body>
        <table>
            <tr>
                <td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td>
            </tr>
        </table>
    </body>
</html>

Agora, isso parece bastante simples, criar uma célula da tabela 100px de largura e 100px de altura com uma borda 6px. Tão simples como parece, parece diferente em diferentes navegadores. No IE8 e o Google Chrome a célula da tabela é de 112 x 112 px (assim 100px dentro e fora 6px). No Firefox 3 e opera a tabela é de 112 x 100 px (assim, por algum motivo a borda é adicionado à largura mesa, mas não para a altura da mesa).

A sério, o que dá? E como eu posso fazer isso tornar o mesmo em cada navegador (e não, eu não posso usar um div eu preciso usar uma tabela, neste caso).

Foi útil?

Solução

A sério, o que dá?

Sim ... alturas de célula de tabela e borda vertical são realmente muito mal definidas na especificação CSS 2.1. Não há nada que totalmente explica como eles interagem, e o modelo de blocos padrão não chega a cobri-lo. A figura na secção 17.6.1, onde eles demonstram a definição de larguras incisivamente não cobre alturas.

FWIW Eu não acho que a interpretação de Mozilla / Opera faz qualquer sentido, mas eu não posso dizer que é fora-e-out errado.

como posso fazer isso tornar o mesmo em cada navegador (e não, eu não posso usar um div eu preciso usar uma tabela, neste caso).

Como cerca de um div dentro da tabela? 

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
    <div style="height: 100px;">...</div>
</td>

Agora é clara qual a medição da ‘100px’ refere-se a. Isso funciona para mim.

Outras dicas

Você já tentou outros DOCTYPES? Eu tive sorte com: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Eu brinquei com ele um pouco, e há algumas coisas, juntos, que os fez olhar o mesmo por mim no IE7 e Firefox 2. As duas coisas que eu tinha a fazer era:

a) adicionar display:block; para o estilo para a célula da tabela (feita Firefox tornar a altura da célula da mesma maneira como o IE fez);

b) adicionado um não-quebrando espaço para a célula (de outro modo IE não exibir as fronteiras).

Eu não tenho IE8 ou Firefox 3 carregado, mas você pode experimentá-lo. Não tenho certeza se existem efeitos colaterais para alterar a exibição de bloco, mas não resolve o problema.

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