Projetos recentes envolvem muita produção de formulários, especialmente caixas de seleção e caixas de rádio. No entanto, durante o processo de desenvolvimento do front-end, verificou-se que as caixas de seleção (complexas) e o texto imediato por trás deles não podiam ser alinhados sem nenhuma configuração, e houve uma grande diferença entre o Firefox e o IE. Mesmo que o alinhamento vertical: o meio esteja definido, ele ainda não pode estar perfeitamente alinhado. Como mostrado na figura abaixo:
Então, verifiquei alguns sites on -line e descobri que esse problema é comum, como mostrado na figura abaixo (FF3.5):
Em muitos sites, há um problema de que os elementos do formulário não podem estar alinhados com o texto rápido. Então, pretendo estudar esta questão. Primeiro, procurei o artigo "Todo mundo diz a todos para o alinhamento vertical" por Wheatlee sênior. Em seu artigo, Wheatlee mencionou vários pontos -chave sobre a centralização vertical:
1. Quando o alinhamento vertical: meio, o centro do elemento está alinhado com o centro dos elementos circundantes.
2. A definição do centro aqui é: a imagem é, obviamente, metade da altura e o texto deve ser movido em 0,5Ex com base na linha de base, ou seja, o centro da letra minúscula x. No entanto, muitos navegadores geralmente definem a unidade de ex como 0.5em, por isso não é necessariamente o centro de x (se você não entende substantivos como a linha de base, leia o artigo de Wheatlee primeiro)
De acordo com essa idéia, em comparação com os problemas que encontrei, a primeira coisa que vem à mente é verificar se o navegador usa as mesmas regras para as caixas de seleção e imagens para renderizar (se você trata as caixas de seleção como uma imagem quadrada). Então eu escrevi o seguinte código:
<estilo>
corpo {tamanho da fonte: 12px;}
</style>
<estilo de entrada = alinhamento vertical: meio; Nome = Tipo de teste = Caixa de seleção>
<img style = vertical-align: meio; src = testpic.gif />
Texto de teste
O Testpic.gif no código é uma imagem preta com exatamente o mesmo tamanho da caixa de seleção. O seguinte é exibido em FF3.5:
Página anterior 1 2 3 4 Próxima página Leia o texto completo