Question

我正在尝试制作一个blockquote样式，其中开头和结尾引号大于文本，但仍然适合它的行，类似example http://s17.postimage.org/ypvv8xxtb/blockquote.png

开放引号显示在文本上方，开放和结束引号都有一些边距，我意识到这是因为字体中的字符本身有这个空格，无论如何我可以补偿这个吗？

Answer 1

如果您不必担心在ie7或更早的时候显示，我认为伪元素将是要走的路。 http://jsfiddle.net/EnL3R/16/

Answer 2

已修改padding，margin，display和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标记周围的黄色边框仅用于测试）

Answer 3

在我看来，你可能最好使用图像。如果您尝试使用引号引用文本，则会遇到引号本身只是行高的一小部分这一事实。

您只需将图片放入内容中，然后使用vertical-align即可获得正确的定位。如果您不需要IE 7或更低版本的支持，您甚至可以将它们放在CSS中:before和: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/

Answer 4

更新blockquote的样式..检查下面的代码。

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;
}

检查this link以获得更多理解.....

blockquote引用样式

4 个答案: