2010-03-25 37 views
13

Tôi đã tải lên một tập tin thử nghiệm ở đây:jQuery: IE8 lề sụp đổ khi sử dụng slideUp()/slideDown()

http://dl.dropbox.com/u/2201804/IE8test.html

Nếu bạn bấm vào "Click me" divs, bạn sẽ thấy div "Phản hồi" xuất hiện bằng cách sử dụng slideDown(). Nhấp vào "Nhấp vào tôi" trong một hộp khác sẽ hiển thị phản hồi hiện đang hiển thị và đưa ra phản hồi thích hợp.

Trong IE8, sau khi các hành động slideUp()/slideDown() hoàn tất, lề giữa các hộp sụp đổ.

Đây có phải là sự cố với hoạt ảnh của jQuery hoặc lỗi hiển thị trong IE8 không?

Trả lời

23

overflow: hidden;

nên làm công việc :)

+1

Đã xảy ra sự cố tương tự trong IE8, thêm tràn: ẩn thành phần tử mọc/thu nhỏ được giải quyết!. – DanC

+2

Điều này cũng làm việc cho tôi. Ai có thể giải thích TẠI SAO điều này hoạt động? Nó chỉ là một lỗi IE? IE9 có làm điều tương tự không? – dkamins

+0

Tôi cũng muốn biết TẠI SAO nó hoạt động ... những gì tràn: ẩn phải làm gì với biến mất lề? – Sorcy

5

Tôi không có giải pháp cho bạn sử dụng lề, nhưng nếu bạn thay thế lề bằng đệm, IE8 sẽ phát cùng. Trong trường hợp của bạn, bạn sẽ cần thêm một div container, bởi vì bạn đã sử dụng padding và bạn có một bộ màu nền.

Vì vậy, giải pháp của bạn có thể trông như thế này:

<div class="assessment"> 
    <div class="inner"> 
    <div class="question"> 
... 

.assessment { 
    padding-top: 20px; 
    background: transparent; 
} 

.assessment .inner { 
    background-color:#DDDDDD; 
    border:1px solid #CCCCCC; 
    color:#555555; 
    display:block; 
    padding:10px 0; 
    text-align:left; 
    width:100%; 
} 

Cheers tj

2

Chỉ cần cập nhật chủ đề cũ này với giải pháp của tôi như tôi đã không thể giải quyết vấn đề sử dụng CSS. Tôi đã sử dụng chức năng gọi lại của slideToggle để tập trung vào phần thân tài liệu vì tôi nhận thấy rằng việc nhấp vào bất kỳ vị trí nào khác trên trang dường như gây ra một sự lặp lại của DOM và các lề đã quay trở lại.

.slideToggle(
    500, 
    function() { 
     document.body.focus(); 
    } 
); 
-1

tôi vẫn còn gặp vấn đề với lề biến mất sử dụng này "overflow: hidden" gợi ý, và quyết định đơn giản là vô hiệu hóa chức năng slideUp/slideDown hoàn toàn trong IE8 bằng cách ghi đè các chức năng 'mặc định' jQuery với một chức năng tùy chỉnh mà vẫn hiển thị hoặc ẩn phần tử, nhưng chỉ chỉ khi IE8 đang được sử dụng.

Để đạt được điều này, tôi đã sử dụng một IE conditional comment để nối thêm một lớp học để các yếu tố html, như vậy:

<!--[if IE 8]><html class="ie8"><![endif]--> 

Sau đó, tôi đã xác định chức năng sau đây trong javascript của tôi để ghi đè lên các chức năng slideUp/slideDown, như như vậy:

(function($) { 
    // disable slideDown/slideUp in IE8 due to margin removal issue 
    if ($('html').hasClass('ie8')) { 
     $.fn.slideDown = function() { 
      return this.show(); 
     };   
     $.fn.slideUp = function() { 
      return this.hide(); 
     }; 
    } 
})(jQuery); 

Và điều đó giải quyết được vấn đề cho tôi, theo như tôi quan tâm. Hi vọng điêu nay co ich!

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