IE6/7下font-size:0失效的解决方法
最近京东和苏宁国美的战争打的很激烈，京东老大刘强东霸气十足，下面我们来研究一下京东商城的网站。
我是一个喜欢追求细节的人，喜欢挑毛病，可能选择了前端设计，职业病就是多。
打开京东网站，以红色为主色调，寓意想必是生意红红火火，正如老刘的微博（@刘强东）所说：京东确实还是一个孩子！ 我们还有很多缺点和不足，还会经常摔跤！ 但是我们会自己爬起来，会努力走的越来越好，终有一天会比前辈健壮！
说道细节，我们就来看看京东商城的网站有那些细节值得我们学习。
首先，我们把网速调慢一点，清空缓存后刷新一下京东商城，看到未完全加载的内容单一却不失风范，完全加载后将渐变的背景与圆角尽收眼底。
京东商城网站第三屏的左侧：电脑数码、家电通讯、丽人、名仕和生活专区的标题，将标题的背景图片禁用时可以看到图片下面有个“秘密”。标题的图片是position盖到文字上面，当未完全加载时显示下面的文字与CSS背景，加载完全时才显示背景图片。这样一个1210宽度的商城网站抛弃了小屏显示器的用户，而在宽屏显示器中做到了极致。
我们可以将京东的这种思路换个角度来展现：
CSS代码
- <style type="text/css">
- <!--
- * { margin:0; padding:0; }
- body { margin:0; padding:0; }
- .tab_list { width:208px; margin:0 auto; border:1px solid #2E82D0; overflow:hidden; }
- .tab_nav h2 { width:100%; height:40px; font-size:0; line-height:0; overflow:hidden; background:#2E82D0 url(标题背景路径) no-repeat; }
- .tab_content { width:100%; padding:10px 0; font-size:14px; font-family:"Microsoft Yahei"; }
- -->
- </style>
HTML代码
- <div class="tab_list">
- <div class="tab_nav"><h2>拓源网</h2></div>
- <div class="tab_content">请自定义高度为40px的标题背景图片。--拓源网-有技术您就来！</div>
- </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来解决小黑点问题。
