CSS伪类first-letter在Firefox中呈现的问题

今天又碰到个CSS样式问题，对于商品的价格，一般我们设计的时候，如下图



货币符号一般写小一些，因为关注的重点是价格，货币单位一般情况下会以本国单位为主，所以弱化的￥符号可以满足这样的体验。

如此在写页面代码中的时候，需要把￥符号额外提出 比如

<span>￥<strong class="price">450.00</strong></span>

对应的CSS为

span{ font-size:14px; color:#999999;}

span .price{ font-size:18px; color:#990000; font-eweight:300;}

如此在IE各版本和Firefox浏览器中是一直的，而且不会有不确定因素，但实际这样的写法，在服务端整合后就会有问题。

服务端整合的时候，基本会把价格和价格单位整合在一起，而不再交给客户端处理，如此，对于客户端的显示来说是优化的，试想，如果当前你的网页是面对中国用户，所以商品的价格单位为￥是自然而然的，但如果你把该价格单位直接写在静态的html文件中，商品价格当然依旧是动态加载的，如果页面面对客户不变更还好，如果需要针对欧美客户，再用￥代表单位自然达不到要求，所以写在静态文件中会导致你要修改每个页面中N多个￥符号为$符号，所以一般会在服务端整合显示是合理的想法。

服务端整合显示如果考虑的周全，返回给的是用HTML代码分隔的价格字符的话也就不会有这样的问题，比如服务端返回

<b>￥</b>450.00

然后前端就可以用b作为CSS样式表的选择器进行样式化，但是，问题就在于可能服务端程序员一者不会考虑这么周全，一者处于SEO优化的角度出发，没有必要再把整体内容用不太好理解的HTML代码分隔，所以一般服务端可能就直接返回

￥450.00

给客户端程序，而前端人员接到这个字符就会比较郁闷，当然直觉告诉我对于第一个字符处理CSS样式表肯定是有办法的。

经过网上查找，不费力气就可以找到伪类first-letter。而且w3school对该伪类的浏览器兼容性说法是主流浏览器都兼容。所以很放心的就用了。

然后在HTML页面代码中实现

<span class="price">￥450.00</span>

.price{ font-size:18px; color:#990000;}

.price:first-letter{ font-size:14px; color:#999999;}

在IE10中调试看似完美达到效果，然后习惯性的在Firefox下调试，问题就来了，这个“￥”符号死活和450.00一样大小。通过网络查找Firefox first-letter 也没有找到关于Firefox不兼容该伪类的情况。

然后又回顾 w3school 对该伪类的说法，说明网页中末位还附带测试器，用其测试器查看测试代码，在Firefox下确实能正常显示，那说明不是Firefox本身的问题，直觉告诉我还是内容形式上，于是把￥更换为别的字符，换成一个中文“我”，再调试后发现显示正常，所以不正常的原因就应该是字符内容的问题，接着又把第一个字符换成中文的“符号，奇怪的事情又发生，此时连带"和“后的一个字符都响应了伪类first-letter的作用而变成灰色小字体，接着用

<span class="price">“我”“那450.00</span>

结果发现”我“”这些字符都呈现灰色小字体的显示，测试到此结束

问题阐述：first-letter本身是实现第一个字符样式调整的功能，但Firefox在中文符号的支持上产生了问题，导致要么不响应，如￥符号，要么多个响应，如被“”符号括起来的内容

问题分析：Firefox作为开源的产品，可能因为本来不是中国人的核心程序，导致对中文支持依然有限，上例子中如果开头是普通中文是没问题的，但使用中文中的标点符号就导致问题出现，懂字符编码的应该可以想明白该BUG产生的原因，因为中文和中文字符对于Unicode编码来说是两个范围，有可能Firefox只识别了中文字符的范围而没有考虑中文标点的范围或者说少考虑了某些中文标点，所以导致这样的问题。

解决方案：就直观的first-letter运用中我是没有想到用什么方法来避免Firefox犯这个错误，所以要么让设计妥协，要么在服务端给第一个字符加入额外的HTML，或者把相关问题提供给Firefox，期望新版本中会把它修改完，但老版本的使用者对于前端技术人员还是要考虑，纠结的浏览器兼容性。