html – blockquote引用样式

前端之家收集整理的这篇文章主要介绍了html – blockquote引用样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

最佳答案
修改了填充,边距,显示和位置属性,现在它似乎显示正常:

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标签周围的黄色边框仅用于测试)

原文链接:https://www.f2er.com/css/427572.html

猜你在找的CSS相关文章