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

原创 2013年12月04日 00:41:47

今天又碰到个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,期望新版本中会把它修改完,但老版本的使用者对于前端技术人员还是要考虑,纠结的浏览器兼容性。 

火狐下,表单无法刷新重置问题的分析与解决

如下的最简单的HTML代码 input id="name" ID="CSDN" value="java2000.net"/>在Firefox 下面,如果你更改了表单的内容,然后你点击刷新按钮,你会发现...
  • java2000_net
  • java2000_net
  • 2008年02月16日 17:02
  • 4700

链接 <a> 的CSS伪类不起作用

hover 和 visited 没效果
  • dongmenshiyu
  • dongmenshiyu
  • 2016年05月30日 10:13
  • 1207

CSS3 伪类中content中的内容

content属性接受广泛的值,范围从简单的字符串到自动计数器引用。任意数目的这些值都用空格分割开,而且都包含在一个单独的content属性。浏览器可以链接这些值来形成一个单值,然后将它插入文档中。 ...
  • adeyi
  • adeyi
  • 2015年10月21日 10:32
  • 4342

CSS 属性 - 伪类和伪元素的区别

前言虽然自己也是做前端的,可是对于真正的前端开发者来说,自己也只不过是一个只会复制黏贴的菜鸟而已。今天由于工作的原因,需要用到伪类和伪元素。以前自以为是的认为,伪类和伪元素既然都有“伪”,那概念肯定是...
  • ai125073509
  • ai125073509
  • 2016年11月30日 18:23
  • 363

css中伪类:after的用法(三种方式)

CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等。 除了它们,还有一些不被常使用的伪类,有:focus,:f...
  • acm765152844
  • acm765152844
  • 2016年05月08日 22:05
  • 3209

CSS入门伪类,锚伪类,伪类子对象选择

伪类语法: 冒号后面的 选择器:伪类{属性:值.....} 锚伪类: a:link{color:#ff00ff} 表示未访问的链接 a:visited{color:#00ff00} 表示已访问的链接 ...
  • u011333814
  • u011333814
  • 2014年01月28日 23:57
  • 1143

css3中伪类选择器:target的使用

参考资料 CSS3 target伪类简介今天由于在做任务13,里面有一个子任务是要求用css写出一个简单的图片轮播,刚开始真的是完全没有思路,想着不用js怎么绑定点击事件呢,看了别人的一些实现方法,发...
  • sinat_27088253
  • sinat_27088253
  • 2016年04月04日 19:10
  • 1638

浅谈CSS伪类和伪元素及CSS3新增伪类

p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type   选择属于其父元素的最后元素的每个元素。 p:only-of-type   选择属于其父元...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年02月28日 17:09
  • 2380

CSS伪类的概念及作用

你对CSS伪类的概念和作用是否熟悉,这里和大家分享一下,CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudocla...
  • gigizhui
  • gigizhui
  • 2015年09月16日 10:31
  • 262

css中使用伪类制作箭头

Title 如上所示的代码,css中给c-main添加宽度和高度方便观察箭头, .c-main{ position:relati...
  • xiaoye_web
  • xiaoye_web
  • 2016年11月15日 09:59
  • 1243
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS伪类first-letter在Firefox中呈现的问题
举报原因:
原因补充:

(最多只允许输入30个字)