IE6 implementa mínimo-ancho

Autor：Eve Cole Fecha de actualización：2025-06-12 13:48:01

En primer lugar, sabemos que este efecto debería ser un tema antiguo.

Al clasificar los archivos hoy, descubrí que algunas de mis soluciones de diseño anteriores han estado en la carpeta durante mucho tiempo. Miremos a través de los viejos.

Cabe señalar que soy afortunado de haber visto al antiguo ingeniero y webmaster de CSSPLAY lograr este efecto, y debe haberse dado muy temprano.

Menos chismes, agregar código fuente:

Activar y utilizar las características extrañas de IE6-Layout, implementación de CSS:

.ie6-out {

_Margin-izquierda: 900px;

_zoom: 1;

}

.ie6-in {

_Position: relativo;

_float: izquierda;

_Margin-Left: -900px;

}

#Min-Width {

Min-Width: 900px;

Antecedentes: #ccc;

Línea de altura: 200px;

_zoom: 1;

}

</style>

Bajo <div ID = min-width> ie6-, el contenedor realiza la simulación del efecto mínimo de ancho. Cambie el tamaño de la ventana del navegador a voluntad, y luego haga clic en el botón para ver el ancho. </div>

</div>

Demostración de implementación de CSS:

Ejecutar el cuadro de código

<html xmlns = http: //www.w3.org/1999/xhtml> <fead> <meta http-equiv = content-type content = text/html; Charset = GB2312/> <title> CSS logra un ancho mínimo </title> <style type = text/css> body { Text-Align: Center;}. Ie6-Out {_Margin-Left: 900px; _Zoom: 1;}. IE6-In {_Position: relativo; _float: izquierda; _margin-le ft: -900px;}#min-width {min-width: 900px; fondos: #ccc; line-height: 200px; _zoom: 1;} </style> </head> <body> class = ie6-out> <div class = ie6-in> <div id = min-width> ie6-, el contenedor se da cuenta de la simulación del efecto mínimo-width. Cambie el tamaño de la ventana del navegador a voluntad, y luego haga clic en el botón para ver el ancho. </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 = ver ancho/> </body> </html>

[CTRL A TODOS CONSEJOS DE SELECCIÓN: puede modificar primero algún código y luego presione la ejecución]

Demostración extendida:

Ejecutar el cuadro de código

<html xmlns = http: //www.w3.org/1999/xhtml> <fead> <meta http-equiv = content-type content = text/html; Charset = GB2312/> <title> CSS logra un ancho mínimo </title> <style type = text/css> body { Text-Align: Center;}. Ie6-Out {_Margin-Left: 900px; _Zoom: 1;}. IE6-In {_Position: relativo; _float: izquierda; _margin-left: -900p x; fondo:#f00; line-height: 200px;}#min-width {min-width: 900px; fondo: #ccc; _zoom: 1;} </style> </head> <body> <divs class = ie6-out> <div class = ie6-in> aa </div> </div> <div class = ie6 out> <div class = ie6-in> aa <div bajo id = min-width> ie6-, el contenedor se da cuenta de la simulación de efecto mínimo-width. Cambie el tamaño de la ventana del navegador a voluntad, y luego haga clic en el botón para ver el ancho. </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 = ver ancho/> </body> </html>

[CTRL A TODOS CONSEJOS DE SELECCIÓN: puede modificar primero algún código y luego presione la ejecución]

Expresión de CSS

-El creo que muchas personas a menudo están preocupadas por bloqueos inexplicables cuando usan este método para lograr el ancho mínimo del contenedor, y a menudo terminan infructuosamente.

Hay dos puntos que deben señalarse aquí:

1. Los elementos que representan la ventana gráfica en IE6 son diferentes en modo estándar y en modo Quirk. El primero es <html> y el segundo es <body>;

2. IE6-En los dos modos diferentes, sus diferentes manifestaciones cuando el contenido se desborda, lo que resulta en un bucle muerto en el juicio de la asignación. Es un poco detallado explicarlo, practicemoslo usted mismo.

La expresión de CSS implementa el código fuente de ancho mínimo: <type de estilo = text/css>

cuerpo {text-align: centro;}

#Min-Width {

Min-Width: 900px;

_Width: Expression ((document.documentelement.clientWidth || document.body.clientwidth) <900? 900px :);

Línea de altura: 200px;

Antecedentes: #ccc;

}

</style>

Manifestación:

Ejecutar el cuadro de código

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = GB2312/> <title> La expresión de CSS logra un ancho mínimo </title> <style tipo = text/css> body { text-align: center;}#min-width {min-width: 900px; _width: expresion ((document.documentelement.clientwidth || document.body.clientwidth) <900? 900px :); line-height: 200px; fondo: #ccc; _zoom: /* desencadenante para ver el cliente para ver el cliente, puede omitir, puede omitir */} </style> </head> <body> <div ID = min-width> ie6-, el contenedor se da cuenta del efecto mínimo de ancho. Cambie el tamaño de la ventana del navegador a voluntad, y luego haga clic en el botón para ver el ancho. </div> <input name = type = button onClick = alert ('Container width =' document.getElementById ('min-width'). ClientWidth 'PX' '/n/n' 'Width =' (document.DocumentElement.ClientWidth || Docum.Body.ClientWidth) 'Px'); valor = ver ancho/> </body> </html>

[CTRL A TODOS CONSEJOS DE SELECCIÓN: puede modificar primero algún código y luego presione la ejecución]

Las dos soluciones anteriores se pueden implementar tanto en modo IE6 estándar como en modo Quirk. La expresión de IE no ha encontrado problemas de eficiencia de la CPU en esta aplicación.