تخطيط الصفحة الثابتة في IE6

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

سؤال

الرأس والتذييل والأشرطة الجانبية لها موضع ثابت.في المنتصف منطقة محتوى تحتوي على شريطي التمرير.لا توجد أشرطة تمرير خارجية في المتصفح.لدي تخطيط يعمل في IE7 وFF.ولست بحاجة لإضافة دعم IE6.كيف يمكنني أن أجعل هذا العمل؟

فيما يلي تقريب لـ CSS الحالي الخاص بي.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <title>Layout</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

    .sample-border {
      border: 1px solid black;
    }

    #header {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 60px;
    }

    #left-sidebar {
      position: absolute;
      top: 65px;
      left: 0px;
      width: 220px;
      bottom: 110px;
    }

    #right-sidebar {
      position: absolute;
      top: 65px;
      right: 0px;
      width: 200px;
      bottom: 110px;
    }

    #footer {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      height: 105px;
    }

    @media screen {
      #content {
        position: absolute;
        top: 65px;
        left: 225px;
        bottom: 110px;
        right: 205px;
        overflow: auto;
      }
      body #left-sidebar,
      body #right-sidebar,
      body #header,
      body #footer,
      body #content {
        position: fixed;
      }
    }
  </style>
</head>

<body>
  <div id="header" class="sample-border"></div>
  <div id="left-sidebar" class="sample-border"></div>
  <div id="right-sidebar" class="sample-border"></div>
  <div id="content" class="sample-border"><img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;" /></div>
  <div id="footer" class="sample-border"></div>
</body>

</html>
هل كانت مفيدة؟

المحلول

قد يكون مبالغة لمشروعك، ولكن يضيف جافا سكريبت IE7 الخاص بـ Dean Edwards دعمًا لتحديد المواقع الثابتة إلى IE6.

نصائح أخرى

أضف الكود التالي إلى <head>

<!--[if lte IE 6]>
<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
.ie6fixed {
    position: absolute;
}
</style>
<![endif]-->

أضف ال ie6fixed فئة CSS إلى ما تريد أن تكون position: fixed;

جرب IE7.js.ينبغي إصلاح مشكلتك دون الحاجة إلى إجراء أي تعديلات.

وصلة: IE7.js

كانت هذه الإجابات مفيدة وسمحت لي بإضافة نموذج محدود من الموضع الثابت إلى IE6، ولكن لم يعمل أي من هذه الإجابات على إصلاح الخطأ الذي يكسر تخطيطي في IE6 إذا قمت بتحديد خاصية CSS العلوية والسفلية للأشرطة الجانبية الخاصة بي (وهي السلوك الذي أحتاجه).

نظرًا لأنه لا يمكن تحديد الأعلى والأسفل، فقد استخدمت الأعلى والارتفاع.تبين أن خاصية الارتفاع ضرورية للغاية.لقد استخدمت جافا سكريبت لإعادة حساب الارتفاع عند تحميل الصفحة ولأي تغيير في الحجم.

يوجد أدناه الكود الذي أضفته إلى حالة الاختبار الخاصة بي لتشغيله.يمكن أن يكون هذا أكثر نظافة مع jQuery.

<!--[if lt IE 7]>
<style>
body>div.ie6-autoheight {
  height: 455px;
}
body>div.ie6-autowidth {
  right: ;
  width: 530px;
}
</style>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<script type="text/javascript">

function fixLayout() {
   if (document.documentElement.offsetWidth) {
      var w = document.documentElement.offsetWidth - 450;
      var h = document.documentElement.offsetHeight - 175;
      var l = document.getElementById('left-sidebar');
      var r = document.getElementById('right-sidebar');
      var c = document.getElementById('content');

      c.style.width = w;
      c.style.height = h;
      l.style.height = h;
      r.style.height = h;
   }
}
window.onresize = fixLayout;
fixLayout();
</script>
<![endif]-->

تحقق من اختراقات CSS النقية أدناه ...يتطلب البعض إجباره على وضع المراوغات (أعتقد أن هذا هو الوضع الأقوى) ولكن جميعها تعمل بشكل جيد حقًا:

http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/ http://tagsoup.com/cookbook/css/fixed/

لقد استخدمت هذا لتأثير كبير، وآمل أن يساعد!

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