Hoạt ảnh một div bên trong kết quả td trong hành vi thất thường trong Chrome

Question

Tôi đang tạo một tiện ích con khá phức tạp có một số sự cố trong Chrome. Tôi đã có thể cô lập sự cố và đang trưng bày sự cố tại số http://jsfiddle.net/8Kb3B/

Tôi có một div bên trong một td và tôi đang cố gắng chuyển đổi div với số .animate() của jQuery. Điều gì xảy ra trong Chrome là td không phát triển trở lại khi số div được trả lại về chiều rộng ban đầu. Ngoài ra, nếu bạn chú ý đến phần cuối của hoạt ảnh "ẩn", bạn sẽ thấy rằng chiều rộng của td nhấp nháy nhanh ở độ rộng của nội dung của div, điều mà tôi thấy lạ.

Điều tương tự cũng xảy ra khi sử dụng .toggle(delay). Nếu tôi sử dụng .toggle() mà không có sự chậm trễ, toàn bộ điều hoạt động như dự định.

Hoạt ảnh hoạt động bình thường trong các dịch vụ của Mozilla và ngay cả trong IE.

Tôi có thiếu thứ gì đó thực sự đơn giản ở đây không?

Answer 1

Tôi cố gắng từ bên cạnh tôi có thể giúp bạn. Viết như thế này cho webkit các trình duyệt dựa trên:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    td { 
    padding-right:2px; 
    } 
    span{ 
    left:5px; 
    position:absolute; 
    } 
    #content { 
    border: 2px solid red; 
    width: 100px; 
    height:20px; 
    display:table; 
    overflow:hidden; 
    position:relative; 
    } 
} 

Kiểm tra này để biết thêm http://jsfiddle.net/8Kb3B/3/