2

純粋なCSSブロック引用スタイルを作成しようとしています。問題は次のとおりです。blockquote：beforeで作成された引用符は、FirefoxやIE9よりもChromeで下に配置されます。どんな助けでも歓迎します、私は無知です:(

JSFiddle： http: //jsfiddle.net/w3A7h/3/

Chrome専用のCSSルールを作成する簡単な方法はありますか？

4

1 に答える 1

1

このような状況で最初に行う必要があるのは、リセットスタイルシートを使用して、デフォルトでブラウザ間で要素がより同じようにレンダリングされるようにすることです。これにより、このような多くの問題が解消されるため、デバッグにかかる​​時間を大幅に節約できます。

そうは言っても、これを試してみてください：

http://jsfiddle.net/AWJyW/

引用スタイルをブロック引用の外側に配置することから、最初の<p>タグを内側に配置する前に配置するように変更しました。次に、位置を相対位置に変更し、左にフロートさせ、負のマージンを設定して、テキストの変形を停止しました。これが機能する理由は、ChromeとFirefoxが絶対位置の境界をどこから開始するかについて明らかに意見が一致していないのに対し、内側の境界の位置については同意しているためです。

blockquote p:first-child:before {
        color: #ededed;
        content: "\201C";
        display: block;
        font-family: Georgia,serif;
        font-size: 110px;
        left: -56px;
        margin-right: -40px;
        position: relative;
        float: left;
        top: -30px;
    }
于 2012-08-15T01:50:59.900 に答える