css li內容在UTF-8中顯示錯誤的字符

Question

我正在嘗試創建樣式來顯示li元素的位置上的箭頭。

$("html > head").append("<style id=styles>div#panel { position: absolute; border-radius: 3px; font-family:'Arial Black'; font-size:13px; }\n\r" + 
    "ul li:before { content: \"\00BB \8680\"; }" 
    + "</style>\n\r"); 

我看到的是一些混雜字符，但不是箭頭。頁面字符集是utf-8。

我這樣說的： http://www.artishock.net/coding/css-list-styling-using-ascii-special-characters/ http://www.w3schools.com/charsets/ref_utf_arrows.asp

如何解決呢？

Answer 1

試試這個。將content: \"\00BB替換爲content: '\\00BB'。

工作實例：

$(function() { 
 
    $("html > head").append("<style>div#panel{ position: absolute; border-radius: 3px; font-family:'Arial Black'; font-size:13px; } ul { list-style: none; } ul li:before{ content: '\\00BB'; margin-right: 10px; } </style>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Some text</li> 
 
    <li>Some text</li> 
 
    <li>Some text</li> 
 
    <li>Some text</li> 
 
</ul>