0

要素:beforeを挿入するために使用しています。contentopen-quote

スクリーンショット公開引用

CSS コード:

blockquote {
    background:#f9f9f9;
    color: #555;
    font-style: italic;
    text-align: center; 
    border: 1px solid #ccc;
    border-left:5px solid #ccc;
    margin:0 30px;
    padding: 30px;
    border-radius: 5px;
    box-shadow: inset 0 2px 0 rgba(200, 200, 200, 0.7),-5px -4px 25px rgba(0, 0, 0, 0.3);
}
blockquote:before {
    color:#ccc;
    content:open-quote;
    font-size:4em;
    float:left;
    margin-top:-30px;
    text-shadow: 0 1px 1px #909090;
}

Chrome と IE9 では問題なく動作するようです。

margin-top:-30px;Firefoxによって解釈が異なると思います。

どうすればこれを解決できますか? ありがとう！

4

2 に答える 2

1

私のバージョンの Firefox では、その動作が表示されないようです。相対配置は別のオプションです。

http://jsfiddle.net/3WMwt/

blockquote:before {
    color:#ccc;
    content:open-quote;
    font-size:4em;
    float:left;
    position: relative;
    top:-30px;
    text-shadow: 0 1px 1px #909090;
}
于 2013-01-23T20:25:11.560 に答える
1

わかりました、CSS ブラウザー ハックを使用してこれを解決できます。

@-moz-document url-prefix() { 
    blockquote:before {
        margin-top:0;
    }
}

しかし、より良い解決策を得ることができてうれしいです。

于 2013-01-23T19:54:02.783 に答える