Trình thiết lập CSS JQuery không hoạt động trong webkit khi thiết lập thuộc tính đếm cột

Question

Tôi có HTML ul mà tôi tạo động bằng JavaScript. Sau khi tôi tạo nó, tôi đặt phong cách trên số ul được sử dụng bằng phương pháp $('#id').css('property',value) của JQuery. Đây là những gì các mã trong câu hỏi trông giống như:

$('#actionSpace #datasetContent') 
    .css('-moz-column-count',this.content.length) 
    .css('-webkit-column-count',this.content.length) 
    .css('column-count',this.content.length) 
    .css('width',this.content.length*150 + 'px'); 

Về cơ bản, tôi đặt 3 column-count tính khác nhau - một lần cho css thường xuyên, một lần cho css trong lĩnh vực moz, và một lần cho css trong lĩnh vực -webkit, và sau đó tôi cũng đặt thuộc tính width.

Mã này hoạt động tốt trong Firefox - css cho phần tử ul có id là datasetContent cập nhật tốt.

Tuy nhiên, khi tôi chạy ứng dụng này trong webkit (Safari hoặc Chrome), điều này sẽ ngừng hoạt động. Điều kỳ lạ là thuộc tính width (điều cuối cùng tôi đặt trong dòng dài css ở trên) đặt đúng, nhưng không có thuộc tính nào khác được đặt. Nếu tôi thay đổi chúng theo cách thủ công trong thanh tra của Chrome, trang web sẽ cập nhật tốt. Tuy nhiên, tất nhiên, tôi không thể mong đợi người dùng trang web của tôi có thể tự tìm kiếm một cách thủ công với CSS trên trang của tôi để làm cho trang web trông đẹp hơn :)

Có ai có ý kiến ​​gì gây ra vấn đề này không?

CẬP NHẬT Tôi đã thử chuyển đổi các ul đến một div, và điều đó không tạo sự khác biệt nào cả. Vấn đề đặc biệt chỉ là JQuery CSS & các thuộc tính đếm cột. Có lẽ đây là một cái gì đó để đưa lên trực tiếp cho folks hơn tại JQuery? Tôi sẽ đợi xem có phản ứng nào ở đây không, và nếu không, tôi sẽ tìm ra kênh thích hợp ở đó.

Answer 1

Bạn đã cân nhắc áp dụng CSS của mình bằng cách sử dụng một đơn .css({ // array }) thay vì chuỗi .css(property, value)? Như bạn đã viết ở trên, sẽ có nghĩa là các kiểu của bạn sẽ hoạt động trong Firefox vì -moz-column-count được áp dụng đúng, nhưng tôi không chắc chắn hai lần sử dụng liên tiếp của .css() có thể bị xâu chuỗi như thế không. Điều này không gây ra lỗi trong Công cụ dành cho Chrome Dev?

Tôi sẽ nghĩ

$('#actionSpace #datasetContent').css({ 
    '-moz-column-count': this.content.length, 
    '-webkit-column-count': this.content.length, 
    'column-count': this.content.length, 
    'width': this.content.length * 150 + 'px' 
}); 

có thể làm việc tốt hơn.