css - open-quote 在 Firefox 18 中使用 :before 和 content 定位不正确

Question

我:before用来插入content元素open-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 对它的解释不同。

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

Answer 1

好的，我可以通过使用 css browser hack 来解决这个问题：

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

但我很乐意得到更好的解决方案。

Answer 2

我的 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;
}