CSS 3: Thêm biểu tượng dấu ngoặc kép vào đầu blockquote

Question

Bất cứ ai có thể cho tôi biết lý do tại sao (cũng có sẵn trực tiếp tại http://jsfiddle.net/A2eTG/6/) biểu thị một biểu tượng " trước blockquote trong Firefox chứ không phải 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; 
} 

Bộ chọn blockquote:before hiển thị trong công cụ dành cho nhà phát triển của Chrome nhưng không xuất hiện trên màn hình.

Điều gì mang lại?

Answer 1

Có vẻ như Chrome không hỗ trợ content: open-quote. Hãy thử thay vào đó:

content: "\""; 

Answer 2

Chrome hỗ trợ content một phần và open-quote không được hỗ trợ.

Vì vậy, những gì bạn có thể thử là sử dụng content: '“'; Các phím tắt để in open-quote trong Windows là Alt+0147 và nếu có cần cho close-quote cũng sau đó Alt+0148.

Answer 3

Xem Rendering Quotes With CSS để biết thêm chi tiết về vấn đề này cũng như cách bản địa hóa các trích dẫn cho các ngôn ngữ khác nhau.

Answer 4

Để giúp những người đi qua này và muốn trích dẫn đẹp hơn ", đây là những mã cho đôi mở, đôi khép kín, đơn mở, và single dấu đóng ngoặc kép tương ứng: "\201C", "\201D", "\2018", "\2019".

Answer 5

Tôi nghĩ rằng giải pháp tốt nhất là

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

Bằng cách đó trình duyệt hỗ trợ open-quote sẽ sử dụng nó và bỏ qua những giá trị trước đó content, trong khi trình duyệt mà không biết những gì open-quote là sẽ bỏ qua dòng và sử dụng cái đầu tiên.