IE 6 so với vị trí: cố định

vị trí: cố định không hoạt động đối với trình khám phá Internet 6. Tôi thực sự không thể hiểu được các bản sửa lỗi được tìm thấy trên google. Tôi cần nó để làm việc trong IE6, IE7, IE8 & FireFox 3.0.IE 6 so với vị trí: cố định

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

Nguồn

2009-07-02 Cudos

Không hỗ trợ IE6! Những người sớm hơn ngừng các trang web hack về IE6, ít lực kéo nó sẽ có và nhanh hơn nó sẽ chết! Hoặc, thêm mã này sau khối kiểu đầu tiên của bạn;

<!--[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]-->

Kết quả không phải là siêu mịn, nhưng nó hoạt động.

CẬP NHẬT

tôi đã không quá rõ ràng về cách thức này nên được sử dụng; chỉ cần thêm id (hoặc class) của bất kỳ phần tử nào có "position: fixed" vào danh sách khai báo ở đầu khối trên và chúng sẽ hoạt động trong IE6.

Nguồn

2009-07-02 13:55:16 Mathew

Hoạt động khá tốt! Nhưng nếu tôi có tiêu đề thì sao? Nó có thể được sửa đổi để đi đến đầu khi tiêu đề đã được thông qua? – Cudos

"Không hỗ trợ IE6" rất dễ nói (tôi thường nói), nhưng đôi khi bạn không có lựa chọn. – mbillard

Tiêu đề sẽ hoạt động tốt, vì mã này chỉ sửa lỗi vị trí: được sửa cho IE6 thay vì làm rối tung bố cục của bạn theo bất kỳ cách nào khác. Đó là một hack mặc dù, vì vậy bạn có thể tìm thấy tình huống mà nó phá vỡ; nó thực sự sẽ phụ thuộc vào cách bố trí cuối cùng của bạn. – Mathew

có IE6 sucks. đây là hack ...

_position: absolute; 
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

về cơ bản bảo IE6 giữ cho vị trí hoàn toàn ở trên cùng bên trái ngay cả khi cuộn. điều này nên đi theo phần còn lại của css của bạn cho phần tử để nó vượt qua nó trong IE6.

ở đây nó là dành cho thanh bên trái của bạn ...

#leftBar { 
position:fixed; 
top:0; 
left:0; 
width:200px; 
_position:absolute; 
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
}

Nguồn

2009-07-02 13:55:11

tôi quên đề cập im sử dụng hack gạch cho IE6 trong mã đó. –

mà gạch dưới hack làm việc cho IE9 mặc dù, nhờ người đàn ông – Chetan

Tìm thấy giải pháp này mà tôi tinh chỉnh (Về cơ bản các đường tôi đã thay đổi là: $ ('# sidebar_left') css ('top', document.documentElement.scrollTop);.):

// 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 * 
* - [email protected]  * 
*********************************/ 
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'); 
     } 
    } 
}

Nó Jitters và có vẻ xấu, nhưng hoạt động trên tất cả các trình duyệt bao gồm IE6.

Nguồn

2009-07-03 13:55:22 Cudos

Tôi thích phương pháp css, mặc dù nó liên quan đến các biểu thức được FORBIDDEN! trong CSS sẽ hiển thị hiệu suất. –

Gần đây tôi đã viết một plugin jQuery để có được vị trí: cố định làm việc trong IE 6+. Nó không phải là jitter khi cuộn, nó nhìn vào khả năng (không phải tác nhân người dùng), hoạt động trong Internet Explorer 6, 7, 8.

Nếu bạn sử dụng chế độ nghiêm ngặt ở vị trí IE7 +: cố định sẽ được tôn trọng, nhưng theo mặc định, IE7 + hoạt động ở chế độ Quirks. Plugin này kiểm tra khả năng trình duyệt, và nếu nó không tôn trọng vị trí: cố định, thì nó sẽ thực hiện sửa chữa jQuery.

http://code.google.com/p/fixedposition/

Something như thế này có thể làm việc cho bạn:

$(document).ready(function(){ 
    $("#chatForm").fixedPosition({ 
     debug: true, 
     fixedTo: "bottom" 
    }); 
});

Bạn có thể cần phải thực hiện một số điều chỉnh CSS nhỏ để làm cho nó làm việc cho mã của bạn. Tôi đang làm việc trên các giá trị "bù đắp" như các tùy chọn khi chúng ta nói.

Nguồn

2010-01-10 02:10:38

Tôi vừa thử nghiệm điều này trên phiên bản IE6 của IETester và nó hoạt động rất tốt và ... Không có Jitter, Whoo!

Giả sử bạn có một phần tử với một lớp hộp chẳng hạn ...

.box { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
}

Thay thế thẻ mở <HTML> với tuyên bố IE có điều kiện ...

và

 <html> 

Sau đó, như MatW & mitchbryson đề nghị sử dụng 'biểu thức' để mô phỏng vị trí cố định.

Lưu ý: Mã này theo sau các kiểu của phần tử gốc trong 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'); 
}

Vấn đề là trên bất kỳ cuộn trang nguyên tố này sẽ jitter, đây là một cách để bù đắp ...

Lưu ý: Mã này đi ở đầu tắt CSS của bạn hoặc sau theo kiểu của bạn 'HTML {}' trong CSS của bạn.

#ie6 { 
    background-image:url(about:blank); 
    background-attachment:fixed; 
}

Theo Thomas Aylott @ SubtleGradient.com,

" ... Điều này buộc xử lý CSS trước khi trang được vẽ lại. Kể từ khi nó được xử lý css một lần nữa trước khi vẽ lại, nó sẽ đi trước và xử lý biểu thức css của bạn trước khi vẽ lại quá này cung cấp cho bạn các yếu tố vị trí cố định hoàn toàn trơn tru ""

liên kết bài viết:.! http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

Ví dụ, tất cả cùng nhau ...

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

Nguồn

2012-05-12 16:19:17 Terry

Tôi đã jitter nghiêm trọng và điều này cố định nó! +1 –

Trả lời

Các vấn đề liên quan