Làm thế nào để buộc ie8 để sơn lại sau khi thêm một lớp vào phần tử dom

Question

Trong ie8 nếu các phần tử không 'sơn lại' với css được liên kết khi bạn thay đổi tên lớp, làm thế nào bạn có thể buộc trình duyệt làm mới và không giết hiệu suất ie8 ?

Bài đăng này (How can I force WebKit to redraw/repaint to propagate style changes?) đề xuất gọi hàm offsetHeight buộc phải sơn lại.

Bài đăng này (http://www.tek-tips.com/viewthread.cfm?qid=1688809) có nhận xét đề xuất thêm và xóa lớp học khỏi phần tử nội dung.

Cả hai cách tiếp cận này đều giết hiệu suất ie8 và lần đầu tiên có tác dụng phụ trên bố cục của tôi.

Cách tiếp cận tốt nhất là gì?

Answer 1

Giải pháp tôi đưa ra cho vấn đề ie8 của tôi là thêm/xóa lớp học trên bố cục gần của phần tử tôi đang thay đổi. Kể từ khi tôi đang sử dụng hiện đại hóa, tôi kiểm tra ie8 và sau đó làm điều này thêm/loại bỏ khiêu vũ để có được css mới để vẽ.

 $uicontext.addClass('new-ui-look'); 
     if ($('html').is('.ie8')) { 
      // IE8: ui does not repaint when css class changes 
      $uicontext.parents('li').addClass('z').removeClass('z'); 
     } 

Answer 2

Kích hoạt hoặc thay đổi kích thước sự kiện trên đó.

var ie8 = whateverYouUseToDetectIE(); 
var element = document.getElementById("my-element"); 
element.className += " new-class"; 
if (ie8) { 
    element.fireEvent("resize"); 
} 

Answer 3

Câu trả lời đúng cho câu hỏi này là bạn cần thực sự thay đổi quy tắc content.

.black-element:before { content:"Hey!"; color: #000;} 
.red-element:before { content:"Hey! "; color: #f00;} 

Thông báo không gian thêm tôi thêm vào sau khi Hey! trên .red-element

Answer 4

này mở rộng trên các câu trả lời khác ở đây. Bạn cần thêm cả lớp mới (câu trả lời của Doug) và đảm bảo lớp học có giá trị nội dung khác nhau (Câu trả lời của Adam). Thay đổi lớp học một mình có thể không đủ. Cần thay đổi nội dung để buộc IE8 phải sơn lại. Đây là related blog post.

Đây là JQuery để thay đổi thêm lớp mới:

$(".my-css-class").addClass("my-css-class2"); 

Đây là CSS với lớp thứ 2 có giá trị nội dung hơi khác nhau:

.my-css-class:before {content: "\e014";} 
.my-css-class2:before {content: "\e014 ";} 

Answer 5

Ridiculously, công trình này:

function ie8Repaint(element) { 
    element.html(element.html().replace('>', '>')); 
} 

Không có gì thực sự thay đổi trong DOM để nó sẽ không ảnh hưởng đến bất kỳ trình duyệt nào khác.

Answer 6

Tôi đã có rất nhiều khó khăn và thử tất cả mọi thứ vô ích ... cho đến khi tôi đã cố gắng này cho IE8

function toggleCheck(name) { 
    el = document.getElementById(name); 
    if(hasClass(el, 'checked')) { 
    el.className = el.className.replace(/checked/,'unchecked'); 
    } else if(hasClass(el, 'unchecked')) { 
    el.className = el.className.replace(/unchecked/,'checked'); 
    } 
    document.body.className = document.body.className; 
} 
function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
} 

Và bây giờ thay đổi CSS của tôi cho các hộp kiểm của tôi làm việc đẹp cho IE8, Chrome và Firefox!