Sabemos que as propriedades da tag de seleção em cada navegador e o suporte de cada navegador são diferentes, o que faz com que a caixa de seleção de seleção seja exibida de maneira diferente em cada navegador. Abaixo, criamos uma seleção totalmente compatível através do suporte dos atributos CSS da aparência principal.
Usei o método de controlar variáveis para escrever uma demonstração para testar três situações em cada navegador: altura.100.padding.0, altura.no.padding.100, No.Height.no.padding. Os resultados são os seguintes: Link Pictures, a aparência da demonstração de cada navegador.
Podemos derivar os seguintes atributos de pesquisa.
ie6 | ie7 | ie8 | ie9 | ff | cap | sf | op | |
Altura padrão | 22px | 22px | 19px | 20px | 19px | 19px | ||
altura | F | T | T | T | T | T | F | T |
preenchimento | F | F | T | T | T | T | F | T |
altura da linha | F | F | F | F | F | F | T | F |
Texto centrado verticalmente | T | T | T | F | F | T | T | T |
Através do resumo acima mencionado dos atributos dos resultados da pesquisa, sabemos que o IE6 deve ser corrigido a 22px e inalterado a qualquer momento, enquanto outros navegadores, exceto o Safari, suportam o atributo de altura, por isso definimos a altura: 22px. Então agora vamos corrigir o navegador Safari. Descobrimos que apenas o Safari suporta o atributo de altura de linha, para que você possa usar a altura da linha para corrigir sua altura para 22px. Quando o tamanho da fonte é 12px, altura da linha: 22px está definida. No final, o texto em FF e IE9 não está centrado e o preenchimento: 2px 0 está definido. Descobrimos que o FF e o IE9 estão centrados, mas a altura da seleção de cada navegador não aumentou. Portanto, há uma pequena dúvida aqui, sob a altura, preenchimento de um pequeno número de números não aumenta a altura geral?
Abaixo está um exemplo de código totalmente compatível.
Copie o código