Positionnement fixe dans Internet Explorer?

StackOverflow https://stackoverflow.com/questions/2151577

  •  23-09-2019
  •  | 
  •  

Question

Je viens d'écrire une page d'exemple avec une bannière d'angle et infobulle. Tout fonctionne très bien avec Firefox. Mais dans les choses IE ne fonctionnent pas correctement. Je surfé sur Internet et a constaté que IE ne supporte pas la position. Fixe
Alors ne quelqu'un sait comment contourner ce problème?
Voici mon code source 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>

    <style type="text/css">
 .tooltip {
    width: 200px;
    position: fixed;
    top:auto;
    bottom:70px;
    right:70px;
    left:auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: xx-small;
}
#cornerbanner {
    position: fixed;
    top:auto;
    left:auto;
    right:0px;
    bottom:0px;
}
    .tooltip .tooltip_top {
    background-image: url(images/Box_BG_01.png);
    height: 34px;
    background-repeat: no-repeat;
    background-position: center top;
    line-height: 45px;
    text-align: right;
    padding-right: 30px;
    vertical-align: text-bottom;
    font-size: xx-small;
    font-weight: normal;
    overflow: hidden;
}
body {
    background-color: #F90;
}
.content p {
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
    font-size: x-small;
    text-align: justify;
    padding: 15px;
    border: 1px solid #FFF;
}
.tooltip .tooltip_top a {
    text-decoration: none;
    color: #333;
}
    .tooltip .tooltip_con {
    background-image: url(images/Box_BG_03.png);
    background-repeat: repeat-y;
    padding-right: 20px;
    padding-left: 20px;
    display: block;
    clear: both;
    text-align: justify;
    letter-spacing: normal;
}
.content {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
    .tooltip .tooltip_bot {
    background-image: url(images/Box_BG_05.png);
    height: 24px;
    background-repeat: no-repeat;
    background-position: center bottom;
}
    .tooltip .tooltip_con #tooltip_link {
    text-align: right;
    color: #666;
    text-decoration: none;
    margin-top: 10px;
}
    .tooltip .tooltip_con #tooltip_link a {
    color: #666;
    text-decoration: none;
}
    .tooltip .tooltip_con img {
    float: right;
    margin-right: 5px;
    margin-left: 5px;
}
    </style>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $(".tooltip").fadeOut(0);
          $("#cornerbanner").mouseover(function(){
          $(".tooltip").fadeIn("slow")
          });
          $("#close_tooltip").click(function(){
          $(".tooltip").fadeOut();
          });
        });

    </script>
    </head> 
<body>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel ligula
        leo, ac aliquet ante. Sed ut elit et purus ultricies ornare. Sed eu justo sem.
        Suspendisse convallis elementum eros, vitae consequat lorem sollicitudin vitae.
        Phasellus bibendum, libero ac semper lobortis, orci tellus lacinia nisl, eget
        luctus risus felis sed dolor. Phasellus commodo imperdiet neque vitae elementum.
        Ut iaculis vestibulum velit cursus blandit. Cras ornare iaculis velit, vitae
        malesuada mi mattis tempor. Ut consequat dapibus massa eget scelerisque. Quisque
        sed suscipit sapien. Duis metus urna, consequat tempor feugiat sit amet, placerat
        non lorem. Integer eget urna elit, et ullamcorper libero. In iaculis aliquet</p>
            <div id="tooltip_link"><a href="http://www.google.com">Click here</a></div>
            </div>
            <div class="tooltip_bot"></div>
    </div>
</body>
</html>
Était-ce utile?

La solution

Le problème est que la balise le plus populaire navigateur le plus utilisé - Internet Explorer pour Windows - ne comprend pas, et au lieu de revenir à position: absolute; qui serait mieux que rien, il revient à position: static; comme spécifié par la norme CSS. Cela a le même effet que si aucune position du tout. Notez que IE 7 de la version bêta 2 vers le haut fait soutenir position: fixed; (si vous utilisez une déclaration de type de document qui déclenche le mode strict), donc je vais exclure IE 7 de ce correctif.

Autres conseils

Voulez-vous dire « ne fonctionne pas dans IE6 »? Ce qui suit CSS position fixe fonctionne bien pour moi d'ancrer un pied de page au bas d'une page dans IE7 et IE8: 

 Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }

position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
right: expression(0+((e=document.documentElement.scrollRight)?e:document.body.scrollRight)+'px');

flotterait l'élément dans le très haut coin droit. Si vous vouliez placer ailleurs, changer le 0 expression(0+( pour l'une des valeurs

Internet Explorer 6 comprend position:absolute, ce qui est une bonne base pour ce travail. La similitude entre absolute et fixed positioning est qu'il supprime de l'écoulement du contenu normal. Alors vous utilisez les top et right normalement positionnements, avec un peu de javascript là-dedans. Je ne sais pas comment il lit le javascript. Mais qui se soucie. Il fonctionne;)

Vous pouvez trier de pirater en utilisant JavaScript / JQuery.

par exemple. Quel est le plus simple jQuery façon d'avoir une 'position: fixed'? (toujours en haut) div

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top