dấu ngoặc kép blockquote style

Question

Tôi đang cố gắng để tạo ra một phong cách blockquote nơi khai mạc và bế dấu ngoặc kép có kích thước lớn hơn so với văn bản nhưng vẫn phù hợp trên dòng của nó, một cái gì đó như thế này example http://s17.postimage.org/ypvv8xxtb/blockquote.png

đây là đoạn code tôi có http://jsfiddle.net/EnL3R/2/

báo giá mở hiển thị phía trên văn bản và cả dấu ngoặc kép mở và đóng đặt một số lề trên đó, tôi nhận ra rằng đó là vì ký tự trong phông chữ có khoảng trắng này, có cách nào tôi có thể bù đắp điều này không?

Answer 1

Modified padding, margin, display và position thuộc tính và bây giờ nó dường như được hiển thị ok:

blockquote span { 
    font-size:100px; 
    color:black; 
    position: relative; 
    display:inline-block; 
    padding:0px; 
} 

blockquote span.primo { 
    margin: -40px 0 -100px 0; 
    bottom: -40px; 
} 

blockquote span.ultimo { 
    margin:-130px 0 0 0; 
    bottom:0px; 
} 

/* IE7 only styles */ 
blockquote span { 
    *display: inline; zoom: 1; /* IE7 fix for inline-block */ 
} 
blockquote span.primo { 
    *margin: -20px; *bottom: -20px; /* IE7 position adjustment */ 
} 
blockquote span.ultimo { 
    *margin: -50px; /* IE7 position adjustment */ 
} 

http://jsfiddle.net/EnL3R/26/ (mà biên giới vàng xung quanh thẻ span là chỉ để thử nghiệm)

Answer 2

Nếu bạn don 't phải lo lắng về việc hiển thị trong ie7 hoặc cũ hơn, tôi nghĩ rằng các yếu tố giả sẽ là con đường để đi. http://jsfiddle.net/EnL3R/16/

Answer 3

Dường như với tôi như bạn có thể sử dụng hình ảnh tốt hơn. Nếu bạn cố gắng và sử dụng văn bản cho các dấu ngoặc kép, bạn chạy lên chống lại thực tế là dấu ngoặc kép chính nó chỉ là một phần nhỏ của chiều cao dòng.

Bạn chỉ có thể đặt hình ảnh vào nội dung của mình và sử dụng vertical-align để có được vị trí đúng. Nếu bạn không cần hỗ trợ cho IE 7 trở xuống, bạn thậm chí có thể đặt chúng trong CSS, trong các phần tử giả :before và :after.

blockquote :first-child:before { 
    content: url('images/openquote.png'); 
    } 

blockquote :last-child:after { 
    content: url('images/closequote.png'); 
    vertical-align: -35px; /* tuned to fit image */ 
} 

Demo: http://jsfiddle.net/EnL3R/17/

Answer 4

Cập nhật phong cách của blockquote .. kiểm tra bên dưới mã cho nó.

blockquote { 
    font-size: 18px; 
    padding:20px; 
    text-transform: uppercase; 
} 
blockquote:before { 
    top: 10px; 
    left: 20px; 
    content: "\201C"; 
} 
blockquote:after { 
    top:80px; 
    content: "\201D"; 
} 
blockquote:before, blockquote:after { 
    position: absolute; 
    width: 60px; 
    height: 60px; 
    font-size: 80px; 
    line-height: 1; 
    color: #dd7975; 
} 

séc this link cho sự hiểu biết nhiều hơn .....