Acredito que esta pergunta foi feita por muitas pessoas na Internet e foi discutida novamente recentemente. Gostaria de registrar meu entendimento pessoal. A diferença entre border:none e border:0; , o desempenho teórico A segunda diferença é a diferença na compatibilidade do navegador.
Diferenças de desempenho:
[border:0;] Embora os pixels definidos como "0" para a borda não sejam visíveis na página, de acordo com o valor padrão da borda, o navegador ainda renderiza a largura da borda/cor da borda, ou seja, o o valor da memória foi ocupado.
[border:none;] Defina a borda como "none", o que significa que não há borda. Quando o navegador analisa "none", ele não realizará ações de renderização, ou seja, não consumirá valores de memória.
Diferenças de compatibilidade:
A diferença de compatibilidade se aplica apenas aos navegadores IE6, IE7 e botões e entradas de rótulo. Esta situação ocorrerá no tema XP de win, win7 e vista.
[border:none;] Quando border é "none", parece que a borda inválida para o IE6/7 ainda existe, como mostrado no exemplo a seguir Demo1 :
[border:0;] Quando border é "0", parece mais eficaz do que "none". Todos os navegadores ocultam a borda uniformemente, conforme mostrado no exemplo a seguir Demo2 :
Resumir :
Comparando border:0; e border:none;, a diferença está na renderização e na não renderização, sinto que eles têm uma relação semelhante com display:none; do atributo border Method, embora se acredite que haja uma diferença no desempenho da renderização, só pode ser considerado teórico.
Como tornar border:none totalmente compatível? Basta adicionar o atributo background ao mesmo seletor, conforme mostrado no exemplo Demo3 a seguir:
Em relação a border:0; e border:none;, eu pessoalmente prefiro usar border:none;, porque, afinal, border:none não é controverso em termos de consumo de desempenho e a compatibilidade pode ser resolvida com atributos de fundo e não é um obstáculo; .