CSS 3: Добавление символа кавычки в начало блочной цитаты

Question

Может кто-нибудь сказать мне, почему это (также доступно в прямом эфире на http://jsfiddle.net/A2eTG/6/) отображает символ " перед цитатой в Firefox, но не в 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;
}

Селектор blockquote:before отображается в инструментах разработчика Chrome, но не отображается на экране.

Что дает?

Answer 1

Чтобы помочь другим, кто сталкивался с этим и хочет получить более красивые кавычки, чем ", это коды для кавычек с двойным открытием, двойным закрытием, одиночным открытием и одинарным закрытием соответственно: "\201C", "\201D", "\2018", "\2019".

Answer 2

Похоже, что Chrome не поддерживает content: open-quote. Попробуйте вместо этого:

content: "\""; 

Answer 3

Chrome поддерживает content частично, а open-quote не поддерживается.

То, что вы можете попробовать, это использовать content: '“'; Ярлык для печати open-quote в Windows - Alt+0147, и если есть необходимость в close-quote, то также Alt+0148.

Answer 4

См. Рендеринг цитат с помощью CSS для получения более подробной информации об этой проблеме, а также о том, как локализовать цитаты для разных языков.

Answer 5

Я думаю, что лучшим решением будет

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

Таким образом, браузеры, поддерживающие open-quote, будут использовать его и игнорировать более раннее значение content, тогда как браузеры, которые не знают, что open-quoteis будет игнорировать эту строку и использовать первую.