O IE6 implementa a largura da minúscula

Autor：Eve Cole Data da Última Atualização：2025-06-12 13:48:01

Primeiro de tudo, sabemos que esse efeito deve ser um tópico antigo.

Ao resolver os arquivos hoje, descobri que algumas das minhas soluções de layout anteriores estão na pasta há muito tempo. Vamos examinar os antigos.

Deve -se notar que tenho a sorte de ter visto o antigo engenheiro e webmaster do CSSPLAY alcançar esse efeito, e deve ter sido dado muito cedo.

Menos fofocas, adicione código fonte:

Acionar e utilizar os recursos estranhos da implementação do IE6-Layout, CSS:

.ie6-out {

_Margin-left: 900px;

_Zoom: 1;

}

.ie6-in {

_Position: relativo;

_float: esquerda;

_Margin-left: -900px;

}

#Min-Width {

largura min: 900px;

Antecedentes: #ccc;

altura de linha: 200px;

_Zoom: 1;

}

</style>

Sob <div id = min-width> ie6-, o contêiner realiza a simulação do efeito de largura min. Altere o tamanho da janela do navegador à vontade e clique no botão para visualizar a largura. </div>

</div>

Demonstração de implementação do CSS:

Execute a caixa de código

<html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> css alcança a largura mínima </ititle> <typey type = text/css> body { Text-align: Center;}. ie6-out {_margin-left: 900px; _Zoom: 1;} ft: -900px;}#min-width {min-width: 900px; background: #ccc; line-hight: 200px; _zoom: 1;} </style> </head> <body> <div class = ie6-out> <div class = ie6-in> <div id = min-width> ie6-, o contêiner realiza a simulação do efeito de largura da minúscula. Altere o tamanho da janela do navegador à vontade e clique no botão para visualizar a largura. </div></div></div><input name= type=button onclick=alert('Container Width=' document.getElementById('min-width').clientWidth 'px' '/n/n' 'Viewport Width=' (document.documentElement.clientWidth||document.body.clientWidth) 'px'); Valor = View Width/> </body> </html>

[Ctrl A All Seleção Dicas: Você pode modificar algum código primeiro e depois pressionar Run]

Demonstração estendida:

Execute a caixa de código

<html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> css alcança a largura mínima </ititle> <typey type = text/css> body { Text-align: Center;}. ie6-out {_margin-left: 900px; _Zoom: 1;} X; Antecedentes:#F00; altura da linha: 200px;}#min-width {min-width: 900px; background: #ccc; _Zoom: 1;} </style> </ad Head> <body> <div class = ie6-out> <div class = ie6-in> aa </div> </div> <div class = ie6-out> <div class = ie6-in> aa <div em id = min-width> ie6-, o contêiner realiza a simulação do efeito de minúscula de min de minúsculas. Altere o tamanho da janela do navegador à vontade e clique no botão para visualizar a largura. </div></div></div><input name= type=button onclick=alert('Container Width=' document.getElementById('min-width').clientWidth 'px' '/n/n' 'Viewport Width=' (document.documentElement.clientWidth||document.body.clientWidth) 'px'); Valor = View Width/> </body> </html>

[Ctrl A All Seleção Dicas: Você pode modificar algum código primeiro e depois pressionar Run]

Expressão de CSS

-Eu acredito que muitas pessoas costumam ser perturbadas por falhas inexplicáveis ao usar esse método para obter a largura mínima do contêiner e geralmente acabam infrutinando.

Há dois pontos que precisam ser apontados aqui:

1. Os elementos que representam a viewport no IE6- são diferentes no modo padrão e no modo peculiar. O primeiro é <html> e o último é <body>;

2. IE6-Em nos dois modos diferentes, suas diferentes manifestações quando o conteúdo transborda, resultando em um loop morto no julgamento da tarefa. É um pouco detalhado explicar, vamos praticar você mesmo.

Expressão CSS implementa o código -fonte da largura mínima: <tipo de estilo = texto/css>

corpo {text-align: Center;}

#Min-Width {

largura min: 900px;

_width: expressão ((document.documentElement.clientWidth || document.body.clientWidth) <900? 900px :);

altura de linha: 200px;

Antecedentes: #ccc;

}

</style>

Sob <div id = min-width> ie6-, o contêiner realiza a simulação do efeito de largura min. Altere o tamanho da janela do navegador à vontade e clique no botão para visualizar a largura. </div>

Demonstração:

Execute a caixa de código

<! Doctype html public -// w3c // dtd xhtml 1.0 transitório // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> A expressão CSS atinge a largura mínima </title> <tipo de estilo = text/css> corpo { Text-align: Center;}#Min-Width {Min-Width: 900px; _Width: Expression ((Document.DocumentElement.ClientWidth || document.body.clientWidth) <900? 900px :); Linha-HEIGW: 200px; Antecedentes: #cc; _ZOOM: /* TIGERA: */} </style> </ad Head> <body> <div id = min-width> ie6-, o contêiner realiza o efeito de largura da min. Altere o tamanho da janela do navegador à vontade e clique no botão para visualizar a largura. </div> <nome de entrada = tipo = botão onclick = alert ('width do contêiner =' document.getElementById ('min-width'). clientwidth 'px' ''/n/n '' viewport width = '(document.documentElement.clientwidththththth. ..Body.clientWidth)' px '; Valor = View Width/> </body> </html>

[Ctrl A All Seleção Dicas: Você pode modificar algum código primeiro e depois pressionar Run]

As duas soluções acima podem ser implementadas no modo IE6 padrão e no modo peculiar. A expressão do IE não encontrou problemas de eficiência da CPU neste aplicativo.