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 をそれぞれのボックス内にとどめ、ベースラインが引用符内のテキストと同じになるようにすることです。

これは引用記号の自然なベースラインと関係があると思いますが、おそらく誰かが詳しく説明できますか?

それを修正する1つの方法は、引用記号に相対的なフォントサイズの負のマージンを与えることかもしれませんが、私はより「正しい」解決策、または引用記号がこのように振る舞う理由についての説明を探しています。

編集: position:relative; の追加 div.paragraph には既に position:relative があるため、この問題は解決されません。

4

2 に答える 2

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 に答える
0

OK私はあなたの問題を理解しています。あなたがしているのはCSSを追加することです:

div.paragraph {position:relative; }

これは、その子のコンテキストを定義します

于 2011-12-14T14:31:21.420 に答える