块引用引文符号在内容框外流血答案

【问题标题】：Blockquote citation symbols bleeding outside contentbox块引用引文符号在内容框外流血
【发布时间】：2011-12-14 22:47:37
【问题描述】：

我有一个块引用，其中引用符号是使用 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。

【问题讨论】：

标签： html css positioning double-quotes text-alignment

【解决方案1】：

        <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”设置为relative，它被视为前后内容的父容器

【讨论】：

【解决方案2】：

好的，我理解你的问题，你所要做的就是添加css：

div.paragraph {position:relative; }

这定义了它的孩子的上下文

【讨论】：