Explication détaillée de la position : problème résolu dans IE6-tutoriel HTML-php.cn

Explication détaillée de la position : problème résolu dans IE6

亚连

Libérer： 2018-05-21 15:21:20

original

2085 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur le poste : problème résolu dans IE6 et l'effet du défilement avec la barre de défilement. J'espère que cet article pourra aider tout le monde. Les amis dans le besoin pourront s'y référer

Explication détaillée de la position dans IE6 : problème résolu et effet du défilement avec la barre de défilement

Avant-propos :

Dans "[jQuery] Scroll Monitoring Compatible avec IE6" (Cliquez pour ouvrir le lien) Il est mentionné que pour résoudre le problème résolu d'IE6, en particulier, vous devez introduire un fichier js et déclarer un script pour déclarer le positionnement fixe de ce p afin de le résoudre. Ce n'est pas bon d'abord. En plus de la difficulté de gérer le Javascript importé, vous devez également introduire JavaScript dans l'instruction head, puis déclarer un identifiant pour le p, puis faire une instruction dans le script.

Utiliser position:fixed n'est rien de plus que d'essayer d'obtenir l'effet suivant.

En gros, la position : fixe ne pose aucun problème dans tous les navigateurs supérieurs à IE7 :

IE8 :

FireFox :

Cependant, comme il n'y a pas d'attribut position:fixed directement dans IE6, l'effet suivant doit être fait :

Il ne peut être résolu en utilisant position: Absolute; et en ajoutant un script javascript exécuté dans le style CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Untitled Document</title> 
    <style type="text/css">     
      .fixedbox { 
        background: #69C; 
        height: 60px; 
        width: 100px;         
        position: fixed; 
        bottom: 100px; 
        /*IE6实现position: fixed;*/ 
        /*等价于position: fixed;虽然代码好长，但是根本就不用管*/ 
        _position: absolute;         
        _top: expression(eval( 
        document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight- 
        (parseInt(this.currentStyle.marginTop,10)||0)- 
        (parseInt(this.currentStyle.marginBottom,10)||0))); 
        /*等价于position: fixed;虽然代码好长，但是根本就不用管*/ 
        _margin-bottom:100px;/*设置位置，不要用bottom，而是改用margin-bottom，margin-xx来实现*/ 
      } 
    </style> 
  </head> 
  <body> 
    <p style="float:left;width:80%;min-height:100px;"> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>    
    </p> 
    <p style="float:left;width:20%;min-height:100px;"><p class="fixedbox"></p></p> 
    <p style="clear:both"></p>     
  </body> 
</html>

Copier après la connexion

Le code ci-dessus, pour les styles IE6, est précédé de _, et la partie _ est l'instruction de style réécrite spécifique à IE6. Pour plus de détails, voir « [CSS] À propos de !important, *, _. symboles》(Cliquez pour ouvrir le lien)

En fait, dans IE6, le CSS suivant :

.fixed{ 
  position: absolute;        
  top: expression(eval( 
    document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight- 
    (parseInt(this.currentStyle.marginTop,10)||0)- 
    (parseInt(this.currentStyle.marginBottom,10)||0))); 
}

Copier après la connexion

est équivalent à celui des autres navigateurs :

.fixed{ 
  position: fixed; 
}

Copier après la connexion

Bien sûr, le CSS qui implémente position:fixed dans IE6 peut ne pas fonctionner correctement dans certains navigateurs, ajoutez donc un trait de soulignement _ devant chaque style pour indiquer qu'il n'est exécuté que dans IE6.

En même temps, après qu'IE6 devrait avoir le style ci-dessus, n'utilisez pas droite, haut, gauche, bas pour vous positionner comme les autres navigateurs, mais utilisez margin-bottom, margin-left, margin-right pour définir the position: fixed La position de p,

Vous devez également faire attention lors de l'ajustement de la position de p ici Étant donné que le CSS mentionné ci-dessus compatible avec IE6 utilise l'attribut top, la définition de margin-top ne fonctionnera pas. . Si vous souhaitez définir ce p Lorsque vous flottez, à quelle distance du haut du navigateur se trouve, vous devez écrire comme ceci :

.fixed{ 
  /*IE6实现position: fixed;*/ 
  _position: absolute;         
  _top: expression(eval(document.documentElement.scrollTop)); 
  _margin-top:100px; 
}

Copier après la connexion

La raison pour laquelle le code sur _top ici est tellement plus court est. car il n'est pas nécessaire d'utiliser document.documentElement.clientHeight pour obtenir la taille de la fenêtre d'affichage du navigateur.

Et -this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0) sert à affiner soyez plus précis, vous n’êtes pas obligé de l’ajouter si vous ne le souhaitez pas, c’est juste un petit effet visuel.

De plus, comme vous pouvez le voir dans le code ci-dessus, concernant la boîte fixe, je n'ai pas défini sa droite et sa gauche, car je veux qu'elle reste stable lors du défilement avec la barre de défilement. parent p.

Autrement dit, le bloc de couleur bleu à droite et un tas de sss à gauche sont toujours divisés en 80 % et 20 %.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Problème de fuite de mémoire JavaScript dans les versions antérieures à IE9 (résumé détaillé)

Fonction JavaScript hasOwnProperty() (image Texte tutoriel, avec exemples de code)

Différences et scénarios d'application des frameworks JS tels que JQuery, Extjs, YUI, Prototype, Dojo (conseils pratiques)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!