0

我有一个块引用，其中引用符号是使用 CSS 内容生成的，使用伪选择器 :before 和 :after 如下所示：

div.paragraph blockquote::before, div.paragraph blockquote::after {
    font-size: 4em;
    color: #999;
    position: absolute;
}

div.paragraph blockquote::before {
    content: "“201C";
    top: 0;
    left: 0;
}

div.paragraph blockquote::after {
    content: "”201D";
    bottom: 0;
    right: 0;
}

这会生成一个如下所示的块引用：

在此处输入图像描述

我想要的是让引用符号留在各自的框中，以便它们的基线与块引用中的文本相同。

我认为这与 citationsymbols 自然基线有关，但也许有人可以详细说明？

解决它的一种方法可能是给引文符号其相对字体大小的负边距，但我正在寻找一个更“正确”的解决方案，或者解释为什么引文符号会这样。

编辑：添加位置：相对；到 div.paragraph 并不能解决这个问题，因为它已经有了 position:relative。

4

2 回答 2

0

好的，我了解您的问题，您要做的是为以下内容添加 css：

div.paragraph {position:relative; }

这为其子项定义了上下文

于 2011-12-14T14:31:21.420 回答
0 
        <style>
        div.paragraph{
        width:50%;
        margin:auto;
        }
        div.paragraph blockquote{
        position:relative;
        }
        div.paragraph blockquote::before, div.paragraph blockquote::after {
            font-size: 4em;
            color: #999;
        }

        div.paragraph blockquote::before {
            content: "“";
            top:-0.4em;
            left: -0.6em;
            position: absolute;

        }

        div.paragraph blockquote::after {
            content: "”";
            right: 0;
            position: absolute;
        }
        </style>

        <div class='paragraph'>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        <blockquote>
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </blockquote>
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
</div>

看来您需要将“div.paragraph blockquote”设置为相对，它被视为前后内容的父容器

于 2011-12-14T13:50:15.473 回答