5

開始引用符と終了引用符がテキストよりも大きいが、それでもその行に収まるブロック引用スタイルを作成しようとしています。例

これは私が持っているコードです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>“&lt;/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">„&lt;/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;
}

開いた引用符がテキストの上に表示され、開いた引用符と閉じた引用符の両方がマージンを置いています。フォント自体の文字にこの空白があるためだと思いますが、これを補うことができますか?

4

4 に答える 4

6

ie7以前で表示を気にしなくていいなら疑似要素がいいと思います。http://jsfiddle.net/EnL3R/16/

于 2012-08-28T16:11:28.040 に答える
5

paddingmargindisplayおよび属性を変更し、position正常に表示されるようになりました:

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/ (タグの周りの黄色い枠spanはテスト用です)

于 2012-08-28T15:55:54.857 に答える
3

画像を使ったほうがよさそうです。引用符にテキストを使用しようとすると、引用符自体が行の高さのごく一部に過ぎないという事実に突き当たります。

コンテンツに画像を配置して、配置を正しくするために使用するだけvertical-alignです。:beforeIE 7 以下のサポートが必要ない場合は、それらを CSS のおよび: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 */
}

デモ: http://jsfiddle.net/EnL3R/17/

于 2012-08-28T16:16:21.937 に答える