line-height在IE6中失效的问题与解决方法

做完了一个页面,只对FF和IE7做了兼容,之后在IE6下进行测试,整个内容都缩小了。
经过检查,发现是大多数(强调大多数很重要)的line-height失效,查看一下资料,了解到是因为li中加入图片,会导致line-height失效如
<ul>
<li><a href=”#”>1.css</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>2.li</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>3.热门</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>4.模板</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>5.百度</a></li>
<li><a href=”#”>6.google</a></li>
<li><a href=”#”>7.搜索</a></li>
<li><a href=”#”>8.解决办法</a></li>
</ul>[来源于http://bbs.blueidea.com/thread-2877695-1-1.html]

解决方法其实很简单,只要不在li中体现出图片的加入就可以,我们可以用很多方法来添加这个图片,虽然都比上述代码麻烦[谁叫ie6流氓呢]。推荐使用把图片单独放在一个li里。

其他方法参考下面:
1.用padding把li撑起来
2.单独把图片写在css中 background

附上其他关于IE6中line-height的失效问题和解决方法:
来源:蹄子流落人间 http://hi.baidu.com/ssl346/blog/item/594eb018bb5069b34aedbcee.html

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 同时以上元素的行高可能×2:

受影响的浏览器:
Microsoft Internet Explorer 5.01 / Windows
Microsoft Internet Explorer 5.5 / Windows
Microsoft Internet Explorer 6&nbsp;

解决方法:
对和文字相连接的img、input、textarea、select、object等元素加以属性

margin: (所属line-height-自身img,input,select,object高度)/2px 0;
vertical-align:middle

发表回复