html - 第一个字母在 Firefox 中不起作用

Question

我已经检查了此处发布的其他问题，但似乎对我没有任何帮助。我的 :first-letter css 适用于除 Firefox 之外的所有内容。任何人都可以看到导致此问题的我的代码有什么问题吗？

实时页面在这里:http://inventivewebdesign.com/uctest/

CSS

quote-box {
    background-color: #EDEDED;
    border: 2px solid #EDEDED;
    border-radius: 10px;
    margin: 20px auto 20px;
    min-width: 400px;
    padding: 40px 50px 30px 50px;
    position: relative;
    text-align: center;
    width: 80%;
    z-index: 10;
    font-style: italic;
}   

.quote-box:before{
    content:""; 
    display:block; 
    position:absolute; 
    z-index:-1; 
    top:10px; 
    left:10px; 
    right:10px; 
    bottom:10px; 
    border:2px solid #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px
    }
.quote-box .leftquote {
    background: url("imgs/quote-l.png") top left no-repeat;
    height: 60px;
    width: 50px;
    position: absolute;
    left: 20px; 
    top: 15px;
    z-index:-1;
}
.quote-box .rightquote {
    background: url("imgs/quote-r.png") no-repeat scroll right bottom rgba(0, 0, 0, 0);
    height: 60px;
    width: 50px;
    position: absolute;
    right: 20px;
    bottom: 15px;
    z-index:-1;
}

.quote-box:first-letter {font-size:250%; }
.quote-box:first-line { line-height: 100%; }

HTML

<div class="quote-box">
     <span class="leftquote">&nbsp;</span>
         We are united. United with customers by collaborating every step...
     <span class="rightquote">&nbsp;</span>
</div>

Answer 1

我认为@theMarceloR 走在正确的轨道上。看起来 Firefox 正试图将伪类应用于不间断空格而不是文本。我将文本包裹在一个 p 标签中，并更改了伪选择器以定位该段落，它现在似乎可以正常工作了。

<div class="quote-box">
 <span class="leftquote">&nbsp;</span>
 <p>We are united. United with customers by collaborating every step...</p>
 <span class="rightquote">&nbsp;</span>
</div>

.quote-box p:first-letter {font-size:250%; }
.quote-box p:first-line { line-height: 100%; }

JSFiddle