Feste Positionierung im Internet Explorer?

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

  •  23-09-2019
  •  | 
  •  

Frage

Ich schrieb gerade eine Beispielseite mit einer Ecke Banner und Werkzeugspitze. Alles funktioniert ganz gut mit Firefox. Aber in IE Dinge funktionieren nicht richtig. Ich surfte im Internet und fand, dass IE nicht Position unterstützt. Fest
So Wer weiß, wie dieses Problem zu umgehen?
Hier ist meine Quellcode 

<!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>
War es hilfreich?

Lösung

Das Problem ist, dass die beliebtesten meistgenutzte Browser - Internet Explorer für Windows - nicht versteht es, und statt zu position: absolute; das Zurücksetzen, die als nichts besser wäre, es zu position: static; kehrt als angegeben durch den CSS-Standard. Dies hat die gleiche Wirkung wie keine position überhaupt hat. Beachten Sie, dass IE 7 von Beta 2 nach oben tut Unterstützung position: fixed; (wenn Sie eine Dokumenttyp-Deklaration verwenden, dass Trigger Strict-Modus), damit ich IE 7 von diesem Update ausschließen.

Andere Tipps

Meinen Sie „funktioniert nicht in IE6“? Die folgende feste Position CSS funktioniert gut für mich eine Fußzeile zum Ende einer Seite in IE7 und IE8 zu verankern: 

 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');

Dies würde das Element in der sehr rechten oberen Ecke schweben. Wenn man es wollte an anderer Stelle positionieren, das 0 in expression(0+( für beiden Werte ändern

Internet Explorer 6 versteht position:absolute, die eine gute Grundlage für diese Arbeiten ist. Die Ähnlichkeit zwischen absolute und fixed positioning ist, dass sie es aus dem Fluss des normalen Inhalts entfernt. So verwenden Sie dann die top und right Positionierungen normalerweise mit ein wenig Javascript drin. Ich bin mir nicht sicher, wie es das Javascript liest. Aber wen interessiert es. Es funktioniert;)

Sie können eine Art es hacken in mit JavaScript / jQuery.

z. Was ist die einfachste jQuery Weg, um eine 'position: fixed' zu haben? (immer oben) div

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top