html - block 引用引用样式

Question

我正在尝试制作一种 block 引用样式，其中开始和结束引号比文本大但仍然适合它的行，像这样

这是我的代码 http://jsfiddle.net/EnL3R/2/

<div id="conteudo">
  <ul class="parcerias">
    <li><a href="#">Title- <i>Author</i></a></li>
     <li class="descricao">
        <blockquote>
            
            <p><span>“</span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla nisl quis enim scelerisque ac consectetur tortor molestie. Morbi mollis augue et risus imperdiet dictum. Suspendisse sed sapien nec erat pretium consectetur et et metus. Maecenas tincidunt turpis placerat nisi vulputate at volutpat ante vulputate. Duis accumsan suscipit posuere. Nunc suscipit facilisis dapibus. Nulla scelerisque felis sed urna bibendum facilisis. Vivamus fermentum egestas lorem ac accumsan. Aenean vulputate massa pharetra sapien tincidunt placerat. Aenean molestie luctus velit. Ut cursus ante ante, quis luctus diam. Ut varius, lorem non vestibulum ornare, sem nisi gravida leo, a molestie mauris mauris non orci. Proin sit amet leo nunc.
            </p> 
            <p> 
            Nunc mollis, nunc eu vestibulum feugiat, lacus dui hendrerit metus, a placerat nulla tortor eget lacus. Etiam semper ligula turpis. Vivamus eget luctus nulla. Aliquam non nibh turpis. Aliquam aliquet lorem id massa cursus auctor egestas est tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at purus vitae tortor venenatis vulputate eget eu metus. Donec accumsan metus scelerisque orci iaculis sed hendrerit ante suscipit. Vivamus tortor dolor, varius mollis scelerisque sed, sollicitudin a tellus. Mauris sit amet tincidunt mauris. Sed sed massa arcu, non eleifend felis. Cras non lacus nisi. Nulla magna turpis, lobortis ac adipiscing sed, consequat sed augue.
            </p> 
            <p> 
            Donec vel purus tortor, ut viverra mauris. Vivamus urna sapien, eleifend at posuere a, malesuada nec risus. In vitae erat in mauris ornare iaculis. Phasellus consectetur vestibulum risus non facilisis. Ut eu nibh quam. Donec eu augue sit amet lacus feugiat ullamcorper eu bibendum arcu. Pellentesque elementum rutrum nisi, ut pellentesque est bibendum id. Fusce justo lacus, venenatis eu vehicula a, porttitor quis mi.
            </p> 
            <p> 
            Sed in felis urna, non vestibulum magna. Nullam vitae augue sed mauris fermentum facilisis. Sed dictum diam eget ante varius at rhoncus arcu rutrum. Suspendisse lorem neque, convallis a vehicula quis, faucibus faucibus elit. Sed eget mauris nec felis malesuada pharetra quis in eros. Fusce urna nisi, iaculis vitae blandit non, posuere et nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vel leo sem. Vestibulum posuere, neque non mollis laoreet, quam quam pretium elit, in tincidunt lacus lectus ac lorem. Mauris vel odio dolor. Phasellus faucibus lobortis justo id malesuada.
            </p> 
            <p> 
            Nullam sed dolor id purus feugiat tincidunt. Aliquam eget consequat lacus. Cras augue erat, mattis sed consequat eget, mattis vel tellus. Aliquam erat volutpat. Ut in ornare lorem. Nam quis sodales tellus. Sed consequat imperdiet mattis. Morbi quis odio quis massa pellentesque laoreet. Curabitur lacinia lacus risus. Maecenas tincidunt ullamcorper ultrices.<span class="ultimo">„</span>
                       </p> 
            
        </blockquote>    
    </li>

/* CSS Document */
@font-face {
    font-family: 'LoraBold';
    src: url('fonts/lora-bold-webfont.eot');
    src: url('fonts/lora-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-bold-webfont.woff') format('woff'),
         url('fonts/lora-bold-webfont.ttf') format('truetype'),
         url('fonts/lora-bold-webfont.svg#LoraBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LoraItalic';
    src: url('fonts/lora-italic-webfont.eot');
    src: url('fonts/lora-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-italic-webfont.woff') format('woff'),
         url('fonts/lora-italic-webfont.ttf') format('truetype'),
         url('fonts/lora-italic-webfont.svg#LoraItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LoraRegular';
    src: url('fonts/lora-regular-webfont.eot');
    src: url('fonts/lora-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-regular-webfont.woff') format('woff'),
         url('fonts/lora-regular-webfont.ttf') format('truetype'),
         url('fonts/lora-regular-webfont.svg#LoraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}



#conteudo ul.parcerias li.descricao blockquote {
    font-style:italic;
    margin:2em 0 3em 2em;
    quotes:'”' '„';
    
}


#conteudo ul.parcerias li.descricao blockquote span {
    font-size:1000%;
    color:black;
    display:inline;
    }

#conteudo ul.parcerias li.descricao blockquote span.ultimo {
    float:none;
    font-size:1000%;
    color:black;
    display:inline;
}

左引号显示在文本上方，左引号和右引号都在上面留了一些边距，我意识到这是因为字体中的字符本身就有这个空白，无论如何我可以补偿这个吗？

Answer 1

如果您不必担心在 ie7 或更早版本中显示，我认为伪元素是可行的方法。 http://jsfiddle.net/EnL3R/16/