JSFiddle

Question

我已经检查了此处发布的其他问题，但似乎对我没有任何帮助。我的：首字母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

Answer 2

你的.quote-box div开头有一个特殊字符的事实应该搞乱你的风格。你试过没有这条线吗？

<span class="leftquote">&nbsp;</span>

First Letter无法在Firefox中使用

2 个答案:

JSFiddle