تحديد المواقع في Internet Explorer؟

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

  •  23-09-2019
  •  | 
  •  

سؤال

لقد كتبت للتو صفحة عينة مع لافتة الزاوية ونصيحة الأداة. كل شيء يعمل على ما يرام مع Firefox. ولكن في أي الأشياء لا تعمل بشكل صحيح. قمت بتصفح الإنترنت ووجدت أن 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>
هل كانت مفيدة؟

المحلول

المشكلة هي أن الأكثر شعبية معظم المتصفح المستخدم - Internet Explorer for Windows - لا يفهمه ، وبدلاً من العودة إلى position: absolute; أيهما سيكون أفضل من لا شيء position: static; كما هو محدد بواسطة معيار CSS. هذا له نفس تأثير عدم وجود position على الاطلاق. لاحظ أن IE 7 من BETA 2 أعلى لا يدعم position: fixed; (إذا كنت تستخدم إعلان نوع المستند الذي يؤدي إلى وضع صارم) لذلك سأستبعد IE 7 من هذا الإصلاح.

نصائح أخرى

هل تقصد "لا يعمل في 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; }

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

هذا من شأنه أن يطفو العنصر في الزاوية اليمنى العليا. إذا كنت ترغب في وضعه في مكان آخر ، فقم بتغيير 0 في expression(0+( لأي من القيمة

Internet Explorer 6 يفهم position:absolute, ، وهو أساس جيد لهذا العمل. التشابه بين absolute و fixed positioning هو أنه يزيلها من تدفق المحتوى العادي. إذن أنت تستخدم top و right المواقع عادة ، مع القليل من جافا سكريبت هناك. لست متأكدًا من كيفية قراءة JavaScript. لكن من يهتم. إنها تعمل ؛)

يمكنك نوع من اختراقه في استخدام JavaScript/jQuery.

على سبيل المثال ما هي أبسط طريقة jQuery للحصول على "موقف: ثابت" (دائمًا في الأعلى) Div؟

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top