posizionamento fisso in Internet Explorer?

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

  •  23-09-2019
  •  | 
  •  

Domanda

Ho appena scritto una pagina di esempio con un banner angolo e punta dell'utensile. Tutto sta funzionando bene con firefox. Ma in IE le cose non funzionano correttamente. Ho navigato in internet e ho trovato che IE non supporta posizione:. Fissa
Quindi qualcuno sa come risolvere questo problema?
Qui è il mio codice sorgente 

<!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>
È stato utile?

Soluzione

Il problema è che il più browser più utilizzato - Internet Explorer per Windows - non lo capisce, e invece di ritornare al position: absolute; che sarebbe meglio di niente, si ritorna al position: static; come specificato dallo standard CSS. Questo ha lo stesso effetto di non avere position a tutti. Si noti che IE 7 dalla versione Beta 2 non verso l'alto sostenere position: fixed; (se si utilizza una dichiarazione di tipo di documento che fa scattare modalità rigorosa) così vi escludere IE 7 da questa correzione.

Altri suggerimenti

Vuoi dire "non funziona in IE6"? La seguente posizione CSS fissa funziona bene per me per ancorare un piè di pagina alla fine di una pagina in IE7 e 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');

Questo sarebbe galleggiare l'elemento nell'angolo in alto a destra molto. Se si voleva posizionarlo altrove, modificare il 0 a expression(0+( sia per il valore

Internet Explorer 6 capisce position:absolute, che è una buona base per questo lavoro. La somiglianza tra absolute e fixed positioning è che rimuove dal flusso del contenuto normale. Allora si utilizzano i posizionamenti top e right normalmente, con un po 'di javascript in là. Io non sono sicuro di come si legge il javascript. Ma a chi importa. Funziona;)

È possibile sorta di incidere in utilizzando JavaScript / jQuery.

es. Qual è il più semplice jQuery modo per avere un 'position: fixed'? (sempre in alto) div

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top