Question

我正在使用:before插入content元素open-quote。

Screenshot open-quote http://i46.tinypic.com/11v5ikj.png

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有不同的解释。

我该如何解决这个问题？谢谢！

Answer 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;
}

在Firefox 18中使用：before和content错误地定位open-quote

1 个答案: