أي 6 مقابل الموقف: ثابت
https://stackoverflow.com/questions/1074335
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
الموضع: ثابت لا يعمل لدى Internet Explorer 6. لا يمكنني فهم الإصلاحات الموجودة على Google. أحتاجها للعمل في IE6 و IE7 و IE8 و Firefox 3.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Sidebar fixed</title>
<style type="text/css">
#wrapper {
position:relative;
width:900px;
margin:0 auto 0 auto;
}
#sidebar_left {
position:fixed;
height:200px;
width:200px;
border:1px solid #000;
}
#sidebar_right {
position:fixed;
height:200px;
width:200px;
margin-left:700px;
border:1px solid #000;
}
#content {
position:absolute;
height:2000px;
width:480px;
margin-left:210px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar_left">
<p>Left sidebar</p>
</div>
<div id="sidebar_right">
<p>Right sidebar</p>
</div>
<div id="content">
<p>This is the content</p>
</div>
</div>
</body>
</html>
المحلول
لا تدعم IE6! كلما توقف الناس عن اختراق مواقع الاختراق عن IE6 ، كلما كان الجر الأقل ستحصل عليه وأسرع ما يموت! أو أضف هذا الرمز بعد كتلة الأسلوب الأول ؛
<!--[if IE 6]>
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
والنتيجة ليست فائقة النعومة ، لكنها تعمل.
تحديث
لم أكن واضحًا جدًا حول كيفية استخدام ذلك ؛ ما عليك سوى إضافة المعرف (أو الفئة) لأي عناصر لها "موضع: ثابت" إلى قائمة الإعلان في بداية الكتلة أعلاه وسوف يتصرفون في IE6.
نصائح أخرى
نعم IE6 تمتص. ها هو الاختراق ...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
هذا يخبر IE6 بشكل أساسي لإبقائه في وضعه في أعلى اليسار حتى أثناء التمرير. يجب أن يخضع هذا تحت بقية CSS الخاصة بك للعنصر بحيث يفرط عليه في IE6.
هنا هو للشريط الأيسر الخاص بك ...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
لقد اختبرت هذا للتو على نسخة Ietester من IE6 وعملت بشكل رائع و ... لا تهرب ، Whoo!
دعنا نقول أن لديك عنصرًا مع فصل مربع على سبيل المثال ...
.box {
position: fixed;
top: 0px;
left: 0px;
}
استبدال الافتتاح <HTML> علامة مع بيانات IE الشرطية ...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
و
<!--[if !IE]--> <html> <!--[endif]-->
ثم مثل ماتو & ميتشبريسون استخدم "التعبير" المقترح لمحاكاة الموضع الثابت.
ملاحظة: يتابع هذا الرمز أنماط العنصر الأصلي في CSS.
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
المشكلة هي أنه في أي صفحة قم بالتمرير ، فإن العنصر سوف يزعج ، هذه طريقة واحدة للتعويض ...
ملاحظة: ينطلق هذا الرمز إلى الأعلى من CSS أو بعد HTML {} في CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
وفق توماس أييلوت @ sptlegradient.com ،
"... هذا يجبر معالجة CSS قبل إعادة رسم الصفحة. نظرًا لأنها تقوم بمعالجة CSS مرة أخرى قبل إعادة رسمها ، فسيتم تقديمها إلى الأمام ومعالجة تعبيرات CSS الخاصة بك قبل إعادة رسمها أيضًا. هذا يمنحك وضعًا سلسًا تمامًا عناصر ثابتة!" "
رابط المقال: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html
على سبيل المثال ، كل ذلك معًا ...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->
<HEAD>
<STYLE>
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
.box {
position: fixed;
top: 0px;
left: 0px;
}
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</STYLE>
</HEAD>
<BODY>
<div class="box"></div>
</BODY>
</HTML>
وجدت هذا الحل الذي قمت بتعديله (في الأساس الخطوط التي قمت بتغييرها كانت: $ ('#sidebar_left').
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo@gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
$('#sidebar_left').css('top',document.documentElement.scrollTop);
$('#sidebar_right').css('top',document.documentElement.scrollTop);
} else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
$('#sidebar_left').css('top','299px');
$('#sidebar_right').css('top','299px');
}
}
}
إنه يتراجع ويبدو سيئًا ، ولكن العمل على جميع المتصفحات بما في ذلك IE6.
لقد كتبت مؤخرًا مكونًا إضافيًا jQuery للحصول على وضع: ثابت يعمل في IE 6+. هو - هي لا Jitter on Scroll ، ينظر إلى القدرة (وليس وكيل المستخدم) ، يعمل في Internet Explorer 6 ، 7 ، 8.
إذا كنت تستخدم وضعًا صارمًا في موقع IE7+: سيتم تكريم الثابت ، ولكن بشكل افتراضي يعمل IE7+ في وضع المراوغات. يتحقق هذا البرنامج المساعد لإمكانية المستعرض ، وإذا لم يكرم الموقف: ثابت ، فإنه ينفذ إصلاح jQuery.
http://code.google.com/p/fixedposition/
شيء من هذا القبيل قد يعمل من أجلك:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
قد تحتاج إلى إجراء بعض تعديلات CSS البسيطة لجعلها تعمل في الكود الخاص بك. أنا أعمل على قيم "الإزاحة" كخيارات كما نتحدث.
من الممكن القيام بذلك من خلال تعبير CSS ، ولكن مع بعض الاختراق الإضافي للحصول على تمرير سلس:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}
