1

コーナーバナーとツールチップを含むサンプルページを作成しました。Firefoxではすべてが正常に機能しています。しかし、IEでは物事が正しく機能していません。インターネットをサーフィンしたところ、IEが位置をサポートしていないことがわかりました：修正済み。
それで、誰かがこの問題を回避する方法を知っていますか？
これが私のソースコードです

<!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>
4

4 に答える 4

2

「IE6では動作しない」という意味ですか？次の固定位置CSSは、IE7およびIE8のページの下部にフッターを固定するために正常に機能します。

 Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }
于 2010-01-28T01:11:56.267 に答える
1

問題は、最も人気position: absolute;のある最も使用されているブラウザー（Windows用のInternet Explorer）がそれを理解せず、何もないよりはましなものに戻す代わりにposition: static;、CSS標準で指定されたとおりに戻ることです。これは、まったくないのと同じ効果がありpositionます。ベータ2以降のIE7はサポートしていることに注意してくださいposition: fixed;（厳密モードをトリガーする文書型宣言を使用する場合）。そのため、この修正からIE7を除外します。

于 2010-01-28T01:06:09.063 に答える
1 
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');

これにより、要素が右上隅に浮きます。他の場所に配置する場合はexpression(0+(、いずれかの値の0を変更します

Internet Explorer 6position:absoluteは、を理解します。これは、この作業の良い基盤です。absoluteとの類似点fixed positioningは、通常のコンテンツのフローから削除されることです。したがって、通常はtopとrightの位置付けを使用し、そこにJavaScriptを少し入れます。javascriptをどのように読み取るかわかりません。しかし、誰が気にします。できます ;）

于 2013-03-18T03:17:39.197 に答える
0

JavaScript/jQueryを使用してハックすることができます。

たとえば、'position：fixed'（常に一番上）divを持つ最も簡単なjQueryの方法は何ですか？

于 2010-01-28T01:33:41.973 に答える