bóng hiện vật trong phim hoạt hình trong IE9

Question

Dưới đây là css, html và js để tái sản xuất:

html:

<div id="outer"> 
    <div>123</div> 
    <div id="inner">345</div> 
</div> 

css:

#outer { 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3); 
} 

#inner { 
    height: 200px; 
} 

js:

$(function() { 
    $('#outer').click(function() { 
     $('#inner').slideUp(); 
    }); 
}); 

và http://jsfiddle.net/DwApF/ cũng như

Bất kỳ giải pháp nào cho vấn đề này?

Answer 1

Cố gắng # 1

http://jsfiddle.net/DwApF/3/

này ẩn cái bóng và sau đó khôi phục lại nó sau khi trượt hoàn tất. Đó là một hack của một giải pháp nhưng đây là một cách thức mà một loạt các hành vi có thể được phá vỡ.

Cố gắng # 2

http://jsfiddle.net/DwApF/11/

này làm một hình ảnh động đồng thời của cả hai container bên ngoài và bên trong. Nó trượt bóng thả không có hiện vật. Tuy nhiên, bạn sẽ cần phải thao tác theo cách thủ công chiều cao của vùng chứa bên ngoài và cũng xử lý việc ẩn nội dung của vùng chứa bên trong. Tuy nhiên, nó hiện loại bỏ vấn đề tạo tác.

Cố gắng # 3 - My Giải pháp Preferred

http://jsfiddle.net/DwApF/12/

này vẫn sử dụng một hình ảnh động đồng thời của cả hai container bên ngoài/bên trong. Tôi thấy không có hiện vật nào trong IE9. Nó cũng xử lý việc ẩn nội dung của vùng chứa bên trong bằng cách sử dụng overflow: hidden.

Việc định cỡ thùng chứa bên ngoài vẫn phải được thực hiện thủ công, nhưng tôi nghĩ đây là giải pháp thích hợp. Nên có một cách để xác định chiều cao thu gọn bằng cách sử dụng jQuery để giá trị này không cần phải được mã hóa cứng.

Giải pháp này hoạt động trong IE9, Chrome và Firefox. Lưu ý rằng tôi đã thêm một số màu/đường viền để dễ dàng thấy các vùng chứa khác nhau.

Answer 2

Giải pháp này làm việc cho tôi - chỉ animate thuộc tính box-shadow của cha mẹ cùng một lúc:

$(function() { 
    $('#outer').click(function() { 
     $('#inner').slideUp(); 
     $(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'}); 
    }); 
}); 

Answer 3

Tin xấu là lỗi này là tồi tệ hơn trong IE10. Tin tốt là quy tắc đơn giản này dường như sửa chữa nó - ít nhất nó có trong IE10. Vì IE9 hỗ trợ: sau lớp giả, nó cũng sẽ hoạt động.

.Element:after { 
content: "."; 
font-size: 1px; 
display: inline; 
overflow: hidden; 
} 

Thay thế .Element với tên hoặc ID (#Element) của đối tượng hiển thị phần tạo tác.

Trong IE9, thường gán tràn: ẩn sẽ hoạt động - mặc dù điều đó không hoạt động trong IE10.

Answer 4

này dường như làm việc với tôi: Đơn giản chỉ cần quấn div trong khác div với những phong cách trên div ngoài

padding-bottom: 10px; 
padding-right: 0px; 
overflow: visible 

Không có ý tưởng tại sao điều này đã làm các trick cho tôi.

Answer 5

Giải pháp cho tôi là đặt DIV tôi muốn biến mất bên trong DIV khác như đã đề cập trước đó .... KHÔNG BAO GIỜ ..... Tôi không áp dụng bất kỳ kiểu đặc biệt nào cho nó. Thay vào đó, tất cả những gì tôi đã làm là sử dụng jQuery để nhắm mục tiêu đến DIV cha mẹ mới và biến nó thành biến mất.

Nó đã loại bỏ những hiện vật bóng gây phiền nhiễu cho tôi. (trên IE10)