O elemento <html>, o elemento raiz no documento XHTML, é muito familiar. No entanto, tenho tentado fazer um layout recentemente e descobri que, no IE, não é um papel tão simples e tem algumas propriedades muito especiais. Vamos resumir para referência:
IE6 Modo padrão:◎ Não importa qual altura e largura estejam definidas, seu tamanho sempre preenche toda a área de visualização.
◎ Não importa que tipo de preenchimento e borda estejam definidos para ele, o tamanho e o tamanho sempre preenchem toda a área de visualização.
◎ A margem será ignorada.
Block O bloco de contenção inicial é a largura da borda do retângulo da área de vista menos <html>
Usando o CSS3 para expressá -lo, podemos considerar <html> no IE6 como um elemento especial de altura: 100%; largura: 100%; Timing de caixa: caixa de fronteira; E esses atributos são imutáveis.
IE7 Modo padrão:Embora o IE7 tenha corrigido vários bugs CSS no IE6, o entendimento de <html> é muito mais complicado que o IE6. Embora o IE6 seja estranho, existem poucos atributos que podem ser alterados, por isso ainda é simples. O <html> do IE7 pode aceitar mais atributos, mas o algoritmo não segue as especificações e é honesto, por isso é muito mais problemático descobrir isso do que o IE6.
O primeiro é o recurso de expansão automática.
O elemento <html> é mais simples na direção y, semelhante à compreensão do IE6 da altura normal do elemento - se a altura do conteúdo exceder a altura de <html>, ou se o <html> não tiver uma altura fixa (ou seja, o valor padrão), então <html> será expandido automaticamente sua própria altura para incluir o conteúdo.
Mas na direção x, o problema se concentra principalmente no entendimento da largura do <body>. Aqui estão duas situações: (não disse <html>? Por que você falou sobre a largura do <body>? Porque se <html> quiser expandir automaticamente, você deve saber a largura do <body> para expandir.)
O primeiro caso: se a largura de <html> é todos os valores que não sejam valores não 0 (incluindo o valor padrão), a largura do <body> será determinada pelas seguintes regras:
1. Se a largura do <body> é um valor fixo, há muita largura.
2. Se a largura do <body> for o valor padrão, a largura preencherá o espaço de conteúdo de <html>.
3. Se <body> em si tem características de encolhimento e arredores, como a posição de definição: absoluto ou exibido: embutido (estranhamente, o flutuador não satisfaz esse item, satisfaz 2), então depende da largura do conteúdo.
The second case: If the width of <html> is 0, then the 1st and 3rd points are the same as above, and the 2nd point, if the width of <body> is the default value auto, the width will adapt to the content, but there is a strange phenomenon, that is, if <body> has a border or padding that is not 0 at the same time, its width will not adapt to the content and will become the 2nd point in the first Case - um espaço de conteúdo cheio de <html>. Como a largura de <html> é 0 no momento, a largura do <body> também entra em colapso para 0.
Em segundo lugar, as configurações de largura e altura de <html> afetarão estranhamente a referência percentual de <body> (ou o bloco contendo <body>).
Na direção y, se a altura de <html> for o valor do valor padrão, a altura do <body> será ignorada se tiver um valor percentual. Mas uma vez que o valor da altura de <html> tenha uma altura específica, mesmo que seja 0, a altura percentual do <body> será aplicada. Mas o que é estranho é que a referência de cálculo para essa altura percentual não é a altura do <html> apenas definida, mas a soma da margem+borda+altura do preenchimento da altura da área de visualização menos <html>.
Na direção x, se a largura tomar o valor padrão automático, e a largura percentual do <body> não será ignorada, mas sua referência de cálculo ainda é tão estranha quanto a direção y, subtraindo a soma da margem+borda+larguras de preenchimento de <html> para a largura da viepport. Se a largura tiver um valor específico, ela será substituída como uma referência de largura percentual para <body>.
Novamente, quando o <body> está definido como posicionando: absoluto, a cor da borda de <html> será inválida. Este é outro bug estranho.
Finalmente, o bloco inicial contendo adota um retângulo de viewport, que é basicamente normal. Mas é impossível criar um bloco contendo com elementos absolutamente posicionados. Mas talvez o bloco contendo criado por <html> seja o retângulo de viewport, quem sabe.
É tão bagunçado. Não é apenas uma cabeça grande, mas também uma cabeça grande depois de resolver. Não sei se você pode vê -lo claramente depois de olhar para trás no futuro. Ie7 ah ie7 ... não é fácil dizer que te amar ...
Modos IE5 e Quirks<html> e <body> Todas as configurações de largura e altura são ignoradas e permanecem cheias de viewports.
◎ <html> preenchimento e margem não são aceitos.
◎ <body> Aceite preenchimento e margem, mas a margem negativa não tem efeito visual, mas será trazida ao calcular outros parâmetros correspondentes.
A borda, o fundo e outros atributos de Body> serão transferidos para cima para o elemento <html>.
Block O bloco de contenção inicial é a borda de estofamento do <body>.
utilidadeEste resumo é derivado do problema de layout no início. O problema do layout é um de seus usos. Vou reescrever uma postagem para resolver mais tarde. Mas esse layout usa apenas alguns recursos e deve haver mais potencial para tocar; portanto, estude -o lentamente.