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, com algumas "naturezas" extraordinárias. Vamos resumir para referência:
IE6 Modo padrão:◎ Não importa qual altura e largura estejam definidas, seu tamanho sempre cobre 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 extraordinário 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> é simples na direção y e é semelhante ao entendimento do IE6 sobre a altura do elemento comum - 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> irá expandir 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: largura de <html> Se for um valor diferente de um valor diferente de um valor que não é 0 (incluindo o valor padrão), então a largura do <body> é 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 cobrirá o espaço de conteúdo de <html>.
3. Se <body> em si tem as características encolhidas e circundantes, como a posição de definição: absoluta ou exibida: embutida (o estranho é flutuar, mas não satisfaz esse item, ele 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 an amazing 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 second point in the first case - O espaço de conteúdo de <html> é coberto com <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 surpreendentemente a referência percentual de <body> (ou <body> está contendo bloco).
Na direção y, se a altura de <html> for o valor padrão, se a altura do <body> tiver um valor percentual, ela será ignorada. 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 das alturas da margem de borda de borda da área de vista altura menos o <html>.
Na direção x, se a largura tomar o valor padrão automático e a direção y for diferente, 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 largura da margem da borda da borda de <html> para a largura da vista. 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 incrível.
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 ... eu quero dizer que te amo muito ...
Modos IE5 e Quirks<html> e <body> Todas as configurações de largura e altura são ignoradas e permanecem cheias de áreas de visualização.
◎ <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.