2010-10-21 4 views
10

Ok, điều này khiến tôi phát điên.Các hàng lơ lửng trong một bảng trong Internet Explorer rất chậm với bất kỳ loại tài liệu nào

Tôi có bảng html với khoảng 100 hàng. Tôi muốn các hàng thay đổi màu sắc khi bạn di chuyển chuột trên nó.

tôi đã cố gắng:

  • : hover trong CSS,

  • onmouseover/onmouseout sự kiện trong javascript

  • jquery .hover

  • jquery .mouseover/.mouseout

  • mouseover trên bảng với e.target vv

Tất cả các công việc một cách hoàn hảo nhanh trong Firefox, và terribly chậm trong IE7/IE8. Không có vấn đề gì doctype tôi đã cố gắng. Nhưng nếu tôi loại bỏ các doctype của trang hoàn toàn (quirks) thì nó cũng rất nhanh trong IE!

Đáng tiếc là không có loại tài liệu là không thể chấp nhận được đối với tôi, vì tôi sử dụng (jquery ui) các thành phần khác mà dường như giống như một loại tài liệu (nếu không những có được chậm trong IE!)

Bất kỳ lời đề nghị?

để kiểm tra:

quirks mode (nhanh lơ lửng trong IE): http://www.watikwil.nl/test_quirks.html

chế độ nghiêm ngặt (lơ lửng chậm trong IE): http://www.watikwil.nl/test_strict.html

UPDATE: tôi thấy rằng việc sử dụng một nền tảng - hình ảnh cho hàng lơ lửng thực sự nhanh hơn trong IE so với sử dụng màu nền !! Nhưng điều này chỉ hoạt động nhanh khi sử dụng: di chuột. Các phương thức jquery hoặc javascript không hoạt động nhanh. Nó vẫn không nhanh như Firefox, nhưng có thể chấp nhận được với tôi.

* CẬP NHẬT 2: Vẫn gặp sự cố. Trong IE8 nó vẫn còn quá chậm, đặc biệt là khi có nhiều lớp trên các hàng (như jqGrid làm) *

UPDATE 3: Bằng cách nào đó tôi đã nhận nó làm việc bây giờ với IE8. Đã sử dụng một số lớp mà JqGrid sử dụng, không biết nữa nếu điều đó tạo nên sự khác biệt. Tôi đang sử dụng: di chuột với hình nền. Vấn đề là khi tôi buộc trang sử dụng chế độ Tiêu chuẩn IE7, nó nhanh hơn đáng kể. Nhưng khi tôi thử cùng một trang trong IE7, đó là RẤT chậm lại ... thực sự khiến tôi phát điên ...

+0

Điều gì sẽ xảy ra nếu bạn đặt bố cục bảng để sửa? Tôi không thể nói rằng tôi đã quan sát vấn đề này (với bảng hay không). Bạn có một số liên kết thử nghiệm không? –

+0

thiết lập bố cục bảng thành cố định không giúp được ... chế độ quirks nhanh hơn rất nhiều! Tôi đã cố gắng để thiết lập một bảng bằng cách sử dụng DIV và có vẻ nhanh hơn nhiều so với việc sử dụng

, nhưng ứng dụng tôi đang sử dụng JqGrid sử dụng
Dylan

+0

Tôi đã thêm một số liên kết thử nghiệm ngay bây giờ, trong IE lơ lửng là chậm hơn nhiều bằng cách sử dụng một DOCTYPE (nghiêm ngặt) – Dylan

Trả lời

0

Trong khi thay đổi loại tài liệu có thể hiển thị vấn đề, nguyên nhân không phải do nguyên tắc. Tôi chỉ có thể nghi ngờ nó được gây ra bởi javascript nhưng bạn có một số vấn đề xác nhận bạn cần phải giải quyết đầu tiên. Xác thực HTML của bạn cho danh sách lỗi đó.

+0

Tôi đã thay đổi ví dụ nghiêm ngặt ngay bây giờ thành html5 và nó xác nhận chính xác ngay bây giờ. Làm cho không có sự khác biệt nào ... Nếu tôi thay đổi chế độ hiển thị thành IE7 (trong Internet Explorer 8) thì khả năng lơ lửng là nhanh. – Dylan

+0

Thoát khỏi sự lộn xộn với tài liệu! Đó là điều đầu tiên xuất hiện trên trang và KHÔNG BAO GIỜ thay đổi. Nó sẽ KHÔNG ảnh hưởng đến cách trình duyệt xử lý việc này nhưng chúng ta đang nói về IE ở đây và bạn không bao giờ có thể tin tưởng IE làm bất cứ điều gì đúng. – Rob

+0

Thay đổi nó thành xhtml nghiêm ngặt, gỡ bỏ javascript và thay đổi lơ lửng thành css: hover. Vẫn còn rất chậm trong IE8. – Dylan

3

Vâng, tôi cũng gặp sự cố này và tốc độ hiển thị bảng đã là một sự cố trong IE vĩnh viễn.Bạn sẽ nhận thấy một chốt CPU (sử dụng 50% bởi IE trên dual của tôi) khi bạn kéo chuột xung quanh.

Tuy nhiên, bạn có thể sử dụng văn bản trang trí: gạch dưới trên CSS: di chuột mà không gây ra hiệu ứng bảng tính toán lại này.

Tôi hiểu nhận xét của Rob rằng loại tài liệu không liên quan (và thánh), nhưng đó là suy nghĩ mơ ước. Vấn đề này có thể dễ dàng tái tạo với một bảng rất mạnh, không có thuộc tính ô hoặc thuộc tính hàng riêng lẻ bên cạnh: hover CSS. Tất nhiên, việc đo lường hiệu quả của DOCTYPE về điều này là khó khăn, vì khi bạn tắt STRICT, bạn vô hiệu hóa khả năng áp dụng của IE: di chuột đến các phần tử không liên kết. Vẽ gạch chân trên văn bản có đường viền CSS đơn giản và không có biểu thức javascript hoặc CSS, vv trên trang cũng gây ra sự cố, tuy nhiên, trang trí văn bản thì không. Rõ ràng IE ngăn chặn tính toán lại bảng cụ thể cho quy tắc CSS đó, trong trường hợp bạn có các liên kết trong bảng của mình. (Nói cách khác, MS phát triển biết về vấn đề này trước khi thả các khiếm khuyết lần đầu tiên, và nó vẫn còn ở đó 2 phiên bản chính sau thế nào thoải mái :)..) Vì vậy, đây là một thử nghiệm mát:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>IE TD performance</title><style type="text/css"> 
    a:hover { text-decoration: line-through; } 
    a:hover { line-height: 1.1em; } 
</style></head><body><table><tbody> 
    <tr> 
     <td><a href='#'>Test</a></td> 
etc. 

Note ở trên, bạn không thấy vấn đề nếu bạn loại bỏ quy tắc CSS 'chiều cao', hoặc nếu bạn chuyển sang DOCTYPE TRANSITIONAL. Cũng lưu ý nó phụ thuộc rất nhiều vào CPU của bạn có bao nhiêu tế bào bạn cần. Cũng lưu ý rằng nó là tổng số ô, hoặc trong hàng hoặc cột (OR nhiều bảng!), Khiến cho hiệu suất kém này hiển thị các bảng IE khi các kiểu CSS thay đổi.

Tôi có một linh cảm (đã không thử nó, nhưng rất thích mã của bạn nếu bạn làm:>) rằng nếu thay vì thay đổi màu sắc trên dòng của bảng riêng của mình, bạn thả một png trong suốt ở phía trước của nó không làm cho IE tính toán lại kích thước bảng, bạn sẽ nhận được hiệu suất mà bạn đang tìm kiếm. Nó thậm chí có thể được đặt trong div bạn có thể đã sử dụng để cuộn bảng của bạn, không nhờ các vấn đề IE khác với các bảng. Tôi đoán bạn có thể nhận được một hiệu ứng di chuột phù hợp (không chính xác những gì bạn có trong tâm trí đồ họa, nhưng khả thi trực quan) với phương pháp này.

Tôi đã chuyển bảng của mình thành div với kích thước cố định, làm phiền MS một lần nữa khiến tôi chọn giữa việc ném thiết kế hoặc lãng phí giờ dự án.

+0

P.S. Trong trường hợp rambling của tôi không rõ ràng, vì bạn đã sử dụng jquery, tại sao không thử sử dụng nó để có được vị trí của các góc trên bên trái và dưới cùng bên phải của TR, và đặt một div hoàn toàn vị trí với một png trong suốt NGOÀI bảng? – Shannon

+0

lưu ý rằng một người khác báo cáo rằng nếu bạn áp dụng các thuộc tính phong cách nhất định (ví dụ: nền) trực tiếp cho phần tử thay vì bằng cách thay đổi lớp thành phần thành thuộc tính mong muốn, IE sẽ làm ít việc vẽ lại hơn. – Shannon