Почему блочные кавычки на странице не имеют одинакового стиля цитаты?

Question

У меня есть несколько blockquote на странице. Я заметил, что первый из них имеет двойные кавычки. "; Однако все остальное имеет одинарную кавычку я не уверен, почему

код я использую являются

<blockquote> 
<p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly.</p> 
</blockquote> 
<blockquote> 
<p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
</blockquote> 
<blockquote> 
<p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
</blockquote> 

И КСС следующим

.

blockquote { 
    border: 2px solid rgba(0, 0, 0, 0.1); 
    border-bottom: 0; 
    border-radius: 6px; 
    line-height: 140%; 
    margin: 0; 
    padding: 15px; 
    } 
    blockquote:before{content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;} 
    blockquote :first-child{display:inline;} 
    blockquote :last-child{margin-bottom:0;} 

можно найти, как это происходит на jsfiddle https://jsfiddle.net/u6gj18ev/

Мне интересно, почему это происходит и как исправить эту

Answer 1

Двойные кавычки для первые кавычки и одинарные кавычки для внутренних кавычек.

Поскольку вы используете только open-quote, цитаты не закрываются, а quoteblock после первого, рассматриваются как внутренние кавычки с одинарными кавычками.

Вы должны закрыть кавычки с:

blockquote:after { 
    content: close-quote; 
} 

Если вы не хотите закрытия котировки, вам нужно использовать:

blockquote:after { 
    content: no-close-quote; 
} 

Если вы хотите, одинарные кавычки вместо двойного использования:

blockquote { 
    quotes: "'" "'"; 
} 

Answer 2

Попробуйте ниже,

Это Зависит от агента пользователя, и если ваши проверки на хроме, на самом деле не поддерживает content:open-quote

blockquote { 
 
     background: #f9f9f9; 
 
     border-left: 10px solid #ccc; 
 
     margin: 1.5em 10px; 
 
     padding: 0.5em 10px; 
 
     quotes:"\201C""\201D""\2018""\2019"; 
 
    } 
 
    blockquote:before { 
 
     color: #ccc; 
 
     content: "\""; 
 
     font-size: 4em; 
 
     line-height: 0.1em; 
 
     margin-right: 0.25em; 
 
     vertical-align: -0.4em; 
 
    } 
 
    blockquote p { 
 
     display: inline; 
 
    }

<blockquote> 
 
    <p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly.</p> 
 
</blockquote> 
 
<blockquote> 
 
    <p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
 
</blockquote> 
 
<blockquote> 
 
    <p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
 
</blockquote> 
 
<blockquote> 
 
    <p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
 
</blockquote>