IE6/7下font-size:0失效的解决方法

web前端1414812年前 (2012-08-15)

最近京东和苏宁国美的战争打的很激烈,京东老大刘强东霸气十足,下面我们来研究一下京东商城的网站。

我是一个喜欢追求细节的人,喜欢挑毛病,可能选择了前端设计,职业病就是多。

打开京东网站,以红色为主色调,寓意想必是生意红红火火,正如老刘的微博(@刘强东)所说:京东确实还是一个孩子! 我们还有很多缺点和不足,还会经常摔跤! 但是我们会自己爬起来,会努力走的越来越好,终有一天会比前辈健壮!

说道细节,我们就来看看京东商城的网站有那些细节值得我们学习。

首先,我们把网速调慢一点,清空缓存后刷新一下京东商城,看到未完全加载的内容单一却不失风范,完全加载后将渐变的背景与圆角尽收眼底。

京东商城网站第三屏的左侧:电脑数码、家电通讯、丽人、名仕和生活专区的标题,将标题的背景图片禁用时可以看到图片下面有个“秘密”。标题的图片是position盖到文字上面,当未完全加载时显示下面的文字与CSS背景,加载完全时才显示背景图片。这样一个1210宽度的商城网站抛弃了小屏显示器的用户,而在宽屏显示器中做到了极致。

我们可以将京东的这种思路换个角度来展现:

CSS代码
  1. <style type="text/css">  
  2. <!--  
  3. * { margin:0; padding:0; }  
  4. body { margin:0; padding:0; }  
  5. .tab_list { width:208pxmargin:0 autoborder:1px solid #2E82D0overflow:hidden; }  
  6. .tab_nav h2 { width:100%; height:40pxfont-size:0; line-height:0; overflow:hiddenbackground:#2E82D0 url(标题背景路径) no-repeat; }  
  7. .tab_content { width:100%; padding:10px 0; font-size:14pxfont-family:"Microsoft Yahei"; }  
  8. -->  
  9. </style>  
HTML代码
  1. <div class="tab_list">  
  2. <div class="tab_nav"><h2>拓源网</h2></div>  
  3. <div class="tab_content">请自定义高度为40px的标题背景图片。--拓源网-有技术您就来!</div>  
  4. </div>  

通过上面这种思路,可以将背景图片代替文字显示,而事实上标题文字仍然存在;兼容了IE6/7/8/9、firefox、chrome等主流浏览器

有的人在应用过程中会出现IE6/7浏览器font-size:0而文字不为0的情况,页面运行时标题的文字变成了小黑点状,这是因为没有设置line-height属性或者text-indent:-9999em导致的问题。

上面的代码中使用的是第一种方法,在.tab_nav h2的样式中使用了line-height:0来解决IE6/7浏览器的小黑点问题,也可以使用第二种方法text-indent:-9999em来解决小黑点问题。