CSS 3: Dodawanie cytatu do początku cytowania

Question

Czy ktoś może mi powiedzieć, dlaczego ten (dostępny również na żywo pod numerem http://jsfiddle.net/A2eTG/6/) renderuje symbol " przed cytatem w Firefoksie, ale nie w przeglądarce Chrome/Safari?

blockquote 
{ 
    padding: 0 60px; 
    padding:10px; 
    padding-left:55px; 
} 

blockquote:before { 
    display: block; 
    font-size: 700%; 
    content: open-quote; 
    height: 1px; 
    margin-left: -0.55em; 
    position:relative; 
    top:-20px; 
} 

Selektor blockquote:before pojawia się w narzędziach deweloperskich Chrome, ale nie pojawia się na ekranie.

Co daje?

Answer 1

Wygląda na to, że Chrome nie obsługuje content: open-quote. Spróbuj to zamiast:

content: "\""; 

Answer 2

Chrome obsługuje content częściowo i open-quote nie jest obsługiwany.

Więc co można spróbować jest użycie content: '“'; skrót aby wydrukować open-quote w Windows jest Alt+0147 i jeśli istnieje potrzeba close-quote także wtedy Alt+0148.

Answer 3

Więcej informacji na ten temat można znaleźć w artykule Rendering Quotes With CSS, a także jak zlokalizować oferty dla różnych języków.

Answer 4

Aby pomóc innym, którzy natknąłem się na to i chce ładniejsze niż " cytaty, są to kody do podwójnych otwartych, zamkniętych podwójne, jedno otwarte i zamknięte pojedynczymi znakami cudzysłowu odpowiednio: "\201C", "\201D", "\2018", "\2019".

Answer 5

Myślę, że najlepszym rozwiązaniem byłoby

content: '“'; 
content: open-quote; 

tamtędy przeglądarki, które obsługują open-quote użyłby go i ignorować wcześniejszą wartość content, podczas przeglądarek, które nie wiedzą, co open-quote to zignoruje tę linię i użycia pierwszy.