jQuery $() .ss ("nội dung") trả về chuỗi "bình thường" trong IE9

Question

Tôi đang sử dụng thuộc tính CSS content để chuyển một số giá trị từ biểu định kiểu LESS sang JavaScript (để sử dụng một số màu được xác định trong LESS trong Canvas yếu tố). Để làm cho cuộc sống của tôi dễ dàng hơn, tôi quyết định đặt các giá trị này một cách dễ dàng để phân tích cú pháp chúng trong JavaScript. đang

LESS:

div#colorChart-critical { 
    content:'@{critical-highest},@{critical-veryhigh},@{critical-high},@{critical-low},@{critical-medium},@{critical-verylow}'; 
} 

mà khi biên soạn mang CSS sau đây:

div#colorChart-critical6 { 
    content: '#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00'; 
} 

Sau đó, tôi cố gắng đọc chúng bằng cách sử dụng jQuery:

$("div#colorChart-critical").css("content").split(","); 

Vấn đề là ở Cuộc gọi IE9 $("div#colorChart-critical").css("content") đang trả về chuỗi "normal" vì một số lý do. Opera, Firefox, Safari và Chrome hoạt động tốt.

Tại sao điều này xảy ra trong IE9?

Mọi sự cố xung quanh vấn đề này trên IE9? Nếu không có bất kỳ CSS nào khác, tôi có thể đưa các văn bản ngẫu nhiên vào?

tôi có thể sử dụng một cái gì đó như:

background: url(#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00); 

Nhưng điều này sẽ tạo ra lỗi trên giao diện điều khiển.

Answer 1

BoltTìm câu trả lời cho thấy nguyên nhân của sự cố của tôi. Tôi tìm thấy một công việc xung quanh bằng cách sử dụng font-family thay vì thuộc tính CSS nội dung.

đang LESS của tôi:

div#colorChart-maincolors { 
    font-family: '@{colorChart1},@{colorChart2},@{colorChart3},@{colorChart4},@{colorChart5},@{colorChart6}'; 
} 

nào biên dịch vào CSS cho:

div#colorChart-maincolors { 
    font-family: '#c0392b,#2980b9,#2ecc71,#f1c40f,#ecf0f1,#34495e'; 
} 

Các chuỗi có thể được mua lại sử dụng:

removeQuotes= function(string) { 
    return string.replace(/^['"]+|\s+|\\|(;\s?})+|['"]$/g, ''); 
}; 
removeQuotes($("#colorChart-maincolors").css("font-family")); //add a .split(',') to get the colors as an array 

Các removeQuotes chức năng là cần thiết vì mỗi trình duyệt thêm một kiểu dấu ngoặc kép khác vào sự trở lại của getComputedStyle (và bằng cách mở rộng jQuer y .css() phương pháp). IE9 thêm một trích dẫn kép, Webkit thêm một trích dẫn duy nhất.

Xem bài đăng này trên thủ thuật CSS: http://css-tricks.com/making-sass-talk-to-javascript-with-json/ để biết thêm thông tin.

Answer 2

Đó là vì content như được xác định trong CSS2.1 không hoạt động trên các phần tử, chỉ trên các yếu tố giả :before và :after giả. IE9 chỉ đơn giản là theo thông số CSS2.1 ở đây, trong đó mandates rằng content trên các phần tử được tính là normal, luôn luôn.

Tôi không biết tại sao các trình duyệt khác sẽ trả lại giá trị bạn đã xác định, đặc biệt là xem xét .css() makes use of getComputedStyle() on those browsers. Nếu họ đang triển khai CSS2.1 content, thì chúng vi phạm CSS2.1 bằng cách không tính giá trị cho normal. Nếu họ đang chuẩn bị cho việc triển khai CSS3 trễ, bất cứ điều gì có thể xảy ra, thì sẽ có nghĩa là họ thực hiện nó trên các yếu tố thực tế bằng cách nào đó ... xấu hổ với họ theo một trong hai cách.

Điều này đưa tôi đến một điểm khác: nếu bạn không thực sự cố gắng sử dụng CSS để sửa đổi nội dung của một phần tử, không sử dụng content, ngay cả khi nó không được xác định để sử dụng với các phần tử bạn đang sử dụng kỹ thuật này ngay từ đầu. Bạn có thể thử gán các màu đó cho các lớp nhất định, thay vào đó tạo một phần tử ẩn và truy vấn các kiểu màu của phần tử đó.

Answer 3

bạn có thể sử dụng để loại bỏ replace(/["']/g, "") thêm trích dẫn từ chuỗi

""string"" sẽ được thay đổi để "string"