Làm thế nào tôi có thể bắt buộc chỉnh lại sau khi DHTML thay đổi trong IE7?

Question

Tôi có một trang nơi người dùng có thể tự động thêm các hộp tải tệp lên. Việc thêm các hộp thay đổi chiều cao của div chúng nằm trong, nhưng các phần tử nhất định của div bên dưới nó nằm trong cùng một vị trí, vì vậy chúng bắt đầu chồng lấp với các phần tử DOM mới.

Công trình này hoạt động chính xác trong IE8, Firefox, Chrome. Làm thế nào tôi có thể buộc IE7 để reflow trang với DHTML mới?

Giải pháp tốt nhất mà tôi từng làm việc ra là thế này:

window.resizeBy(1, 0); 
setTimeout(UndoResize, 0); 

Nhưng nó không làm việc với một cửa sổ tối đa (nó phục hồi cửa sổ).

Answer 1

Hãy thử:

element.className = element.className; 

trên div sửa đổi (hoặc có thể là mẹ của nó, hoặc thậm chí một tổ tiên xa hơn, tùy thuộc vào các yếu tố khác nhau như ngăn chặn tương đối vị trí).

Khi className được gán giá trị, IE sẽ chỉnh lại và vẽ lại phần đó của trang trong trường hợp CSS ảnh hưởng đến yếu tố đó đã thay đổi. May mắn thay, nó không được tối ưu hóa để kiểm tra nếu giá trị className thực sự thay đổi từ giá trị trước đó của nó, vì vậy ở trên sẽ kích hoạt reflow mà không vi phạm bất cứ điều gì khác.

Tôi đã tìm thấy một dịp khi IE6 cố định này nhưng đã phá vỡ IE7, nhưng hãy thử và xem nó có hoạt động cho bạn hay không.

Answer 2

Tôi vừa lãng phí một lượng đáng kinh ngạc của thời gian trên lỗi hoàn toàn vô lý này (biểu hiện ở chỉ IE7), trong cách trang web quá phức tạp để đặt mã ở đây, nơi element.className = element.className không hoạt động.

Giải pháp tối ưu cho IE7 (tốt, kiểm tra ít nhất ở nơi tôi đã gặp phải lỗi) dường như được thực hiện TẤT CẢ các dòng dưới đây như một cái móc để bất kỳ thay đổi DOM:

try{ 
    element.parentNode.style.cssText += ""; 
    element.parentNode.style.zoom = 1; 
    element.style.cssText += ""; 
    element.style.zoom = 1; 
}catch(ex){} 

Chúng ta đã có hai dòng đầu tiên (bao quanh với try-catch) trong khung của chúng ta trong một thời gian dài, nhưng nó không đủ trong một số trường hợp cụ thể, nhưng thêm hai dòng tiếp theo đã sửa lỗi này.

Được thử nghiệm cả trong cửa sổ cực đại và không được phóng to.

try/catch được đặt ra vì trong một số trường hợp nhất định (ví dụ: bên trong iframe) nó có thể tạo ra lỗi JS sẽ phá vỡ ứng dụng (đây là thông tin từ đồng đội của tôi, tôi chưa tự mình gặp phải).

Ngược lại, đối với IE8, element.className = element.className dường như được làm công việc của mình (yeah, tất cả chúng tôi yêu mã có điều kiện cho mỗi phiên bản ...)

Tôi yêu Win XP như một hệ điều hành, nhưng cho đến IE-bound mọi người sử dụng nó, chúng ta phải tìm những bản sửa lỗi bẩn thỉu cho những vấn đề điên rồ đó ... Chết tiệt buồn.

---

Sửa 2013.03.05

Đoạn trên dường như được làm việc trong hầu hết các tình huống, nhưng cũng không đủ ở một nơi.Bây giờ chúng tôi có các nội dung như thế này trong mã của chúng tôi:

try { 
    var s1 = domElt.parentNode.style, s2 = domElt.style; 
    var dummyCss = "foo:foo;"; // do not add leading ';' here! 
    s1.cssText += ""; 
    s1.zoom = 1; 
    s2.cssText += dummyCss; 
    s2.cssText = s2.cssText.replace(dummyCss, ""); 
} catch (ex) {}