Como a borda é renderizada no navegador

O método de renderização do atributo border no navegador tem sido discutido no grupo QQ há muito tempo, e eu sempre usei border:0 none para lidar com isso. Claro, também existem razões pelas quais eu faço isso. Esse motivo será mencionado na análise abaixo. Antes de analisar as propriedades da fronteira, alguns pontos que precisam ser explicados são:

1. Xiaozhi, não sou um especialista em análise, apenas uso as duas ferramentas Firebug e IE Developer para visualizar os resultados de renderização do navegador no navegador FF e no navegador IE;
2. Como analisamos apenas os resultados de renderização do navegador FF e do navegador IE, isso não significa que todos os navegadores são renderizados da mesma maneira.

Para comparar melhor os estilos de borda, escolhemos aqui o elemento "botão", mas as tags utilizadas são diferentes. São elementos de tag de entrada e elementos de tag de botão. A propósito, uma coisa que precisa ser mencionada é que o que esses dois elementos de rótulo têm em comum em vários navegadores é que ambos são elementos de controle do sistema. O estilo da borda e o fundo do botão têm uma relação absoluta com o tema do sistema.

Usando o mesmo código de estrutura XHTML, compare o navegador FF e o navegador IE, respectivamente.

Animação de demonstração 1 Animação de demonstração 2

Através da influência do estilo padrão do tema do sistema atual, descobrimos que o navegador IE já possui uma pequena diferença na análise dos dois elementos da tag, botão e entrada, mas no que diz respeito à página vista no tema do sistema atual é em questão, o efeito de desempenho é quase o mesmo. Os alunos interessados ​​​​neste ponto podem experimentar por si próprios. Nos resultados dos atributos vistos na coluna acima sem qualquer definição de estilo CSS, o resultado que obtemos é:

*Navegador FF: Os estilos de borda das tags de entrada e das tags de botão são border-width:3px;
* Navegador IE: O estilo da borda do rótulo de entrada é border-width:2px;

Com esses dados, vamos dar uma olhada em qual será o resultado quando definirmos um estilo para o atributo border.