I have checked the other questions posted here but nothing seems to work for me. My :first-letter css works in everything but Firefox. Can anyone see what is wrong in my code that is causing this?
我已经检查过这里发布的其他问题,但似乎没有什么对我有用。我的:首字母css适用于除Firefox之外的所有内容。任何人都可以看到我的代码中出现的问题是什么?
Live page is here: http://inventivewebdesign.com/uctest/
实况页面在这里: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"> </span>
We are united. United with customers by collaborating every step...
<span class="rightquote"> </span>
</div>
2 个解决方案
#1
1
I think @theMarceloR was on the right track. It looks like Firefox is trying to apply the pseudo class to the non-breaking space instead of the text. I wrapped the text in a p tag and changed the pseudo selector to target the paragraph and it seems to be working now.
我认为@theMarceloR走在了正确的轨道上。看起来Firefox正在尝试将伪类应用于非中断空间而不是文本。我将文本包装在一个p标签中并更改了伪选择器以定位段落,它现在似乎正在工作。
<div class="quote-box">
<span class="leftquote"> </span>
<p>We are united. United with customers by collaborating every step...</p>
<span class="rightquote"> </span>
</div>
.quote-box p:first-letter {font-size:250%; }
.quote-box p:first-line { line-height: 100%; }
JSFiddle
#2
0
The fact that you have a special character right at the beginning of your .quote-box div should be messing up your style. Have you tried without this line?
你在.quote-box div的开头有一个特殊字符的事实应该搞乱你的风格。你试过没有这条线吗?
<span class="leftquote"> </span>
#1
1
I think @theMarceloR was on the right track. It looks like Firefox is trying to apply the pseudo class to the non-breaking space instead of the text. I wrapped the text in a p tag and changed the pseudo selector to target the paragraph and it seems to be working now.
我认为@theMarceloR走在了正确的轨道上。看起来Firefox正在尝试将伪类应用于非中断空间而不是文本。我将文本包装在一个p标签中并更改了伪选择器以定位段落,它现在似乎正在工作。
<div class="quote-box">
<span class="leftquote"> </span>
<p>We are united. United with customers by collaborating every step...</p>
<span class="rightquote"> </span>
</div>
.quote-box p:first-letter {font-size:250%; }
.quote-box p:first-line { line-height: 100%; }
JSFiddle
#2
0
The fact that you have a special character right at the beginning of your .quote-box div should be messing up your style. Have you tried without this line?
你在.quote-box div的开头有一个特殊字符的事实应该搞乱你的风格。你试过没有这条线吗?
<span class="leftquote"> </span>