IE6 implémente la largeur min

Auteur：Eve Cole Date de mise à jour：2025-06-12 13:48:01

Tout d'abord, nous savons que cet effet devrait être un ancien sujet.

Lors du tri des fichiers aujourd'hui, j'ai constaté que certaines de mes solutions de mise en page précédentes se trouvent depuis longtemps dans le dossier. Regardons les anciens.

Il convient de noter que j'ai la chance d'avoir vu l'ancien ingénieur et webmaster de CSSPlay réaliser cet effet, et il doit lui être donné très tôt.

Moins de ragots, ajouter le code source:

Déclencher et utiliser les fonctionnalités étranges de IE6-Layout, CSS Implémentation:

.ie6-out {

_Margin-left: 900px;

_zoom: 1;

}

.ie6-in {

_Position: relatif;

_float: gauche;

_Margin-left: -900px;

}

# min-large {

largeur min: 900px;

Contexte: #ccc;

Heure de ligne: 200px;

_zoom: 1;

}

</ style>

Sous <div id = min-width> ie6-, le conteneur réalise la simulation de l'effet de largeur min. Veuillez modifier la taille de la fenêtre du navigateur à volonté, puis cliquez sur le bouton pour afficher la largeur. </div>

</div>

Démonstration de mise en œuvre du CSS:

Exécutez la case de code

<html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> CSS atteint une largeur minimale </Title> <style type = Text / CSS> Body { Text-Align: Center;}. ie6-out {_margin-left: 900px; _zoom: 1;}. ie6-in {_position: relatif; _float: gauche; _margin-le ft: -900px;} # min-width {min-width: 900px; background: #ccc; line-height: 200px; _zoom: 1;} </ style> </ head> <body> <div> classe = ie6-out> <div class = ie6-in> <div id = min-width> ie6-, le conteneur réalise la simulation de l'effet de largeur min. Veuillez modifier la taille de la fenêtre du navigateur à volonté, puis cliquez sur le bouton pour afficher la largeur. </div> </div> </ div> <input name = type = Button onClick = alert ('Container width =' document.getElementById ('min-width'). ClientWidth 'px' '/ n / n' 'wiffort width =' (document.DocumentElement.ClientWidth || document.clientwidth) 'px'); Value = View Largeth /> </ Body> </html>

[Ctrl a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]

Démo prolongé:

Exécutez la case de code

<html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> CSS atteint une largeur minimale </Title> <style type = Text / CSS> Body { Text-Align: Center;}. ie6-out {_margin-left: 900px; _zoom: 1;}. ie6-in {_position: relatif; _float: Left; _margin-left: -900p x; arrière-plan: # f00; line-height: 200px;} # min-width {min-width: 900px; background: #ccc; _zoom: 1;} </ style> </ head> <body> <div> <div> Class = ie6-out> <div class = ie6-in> aa </div> </div> <div class = ie6-out> <div class = ie6-in> aa <div sous id = min-width> ie6-, le conteneur réalise la simulation de l'effet à largeur min. Veuillez modifier la taille de la fenêtre du navigateur à volonté, puis cliquez sur le bouton pour afficher la largeur. </div> </div> </ div> <input name = type = Button onClick = alert ('Container width =' document.getElementById ('min-width'). ClientWidth 'px' '/ n / n' 'wiffort width =' (document.DocumentElement.ClientWidth || document.clientwidth) 'px'); Value = View Largeth /> </ Body> </html>

[Ctrl a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]

Expression CSS

-Je crois que de nombreuses personnes sont souvent troublées par des accidents inexplicables lors de l'utilisation de cette méthode pour atteindre la largeur minimale du conteneur, et se retrouvent souvent sans usine.

Il y a deux points qui doivent être signalés ici:

1. Les éléments représentant la fenêtre dans IE6- sont différents en mode standard et en mode bizarrerie. Le premier est <html> et le second est <body>;

2. IE6-in sur les deux modes différents ci-dessus, ses différentes manifestations lorsque le contenu déborde, entraînant une boucle morte en jugement d'affectation. C'est un peu verbeux à expliquer, pratiquons-le vous-même.

CSS Expression implémente le code source de largeur minimale: <style type = text / css>

Body {Text-Align: Center;}

# min-large {

largeur min: 900px;

_Width: Expression ((document.DocumentElement.ClientWidth || document.body.clientwidth) <900? 900px :);

Heure de ligne: 200px;

Contexte: #ccc;

}

</ style>

Démo:

Exécutez la case de code

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><html xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; Charset = GB2312 /> <Title> L'expression CSS atteint une largeur minimale </title> <style type = Text / CSS> Body { Text-Align: Center;} # min-width {min-width: 900px; _width: expression ((document.documentElement.clientWidth || document.body.clientwidth) <900? 900px :) * /} </ style> </ head> <body> <div id = min-width> ie6-, le conteneur réalise l'effet de largeur min. Veuillez modifier la taille de la fenêtre du navigateur à volonté, puis cliquez sur le bouton pour afficher la largeur. </ div> <entrée name = type = bouton onclick = alert ('Container width =' document.getElementByid ('min-width'). ClientWidth 'PX' '/ n / n' 'Viewport width =' (document.documentElement.clientWidth || document.body.clientWidth) 'px'); Value = View Largeth /> </ Body> </html>

[Ctrl a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]

Les deux solutions ci-dessus peuvent être implémentées en mode IE6-standard et en mode Quirk. IE Expression n'a pas trouvé de problèmes d'efficacité CPU dans cette application.