line-height在IE6下失效的问题解决办法(已经亲手验证)

以前做页面IE6行高问题,总出.但为了省时间,都改用PADDING撑起来去解决了....就直接不用行高解决.今天有空又在网上查了查.总结一下解决方法!

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

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

解决方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>灰狼博客itlobo.com</title>
<styletype="text/css">
body{margin:0;padding:0;font-size:14px;color: #000; font-family:"Courier New", Courier, monospace;padding-top:20px}
a{text-decoration:none}
h1{font-size:18px;height:22px;margin:0;padding:0}
.content{width:300px;margin:0 auto;height:100%}
ul{margin:0;padding:0;list-style:none}
.itlobo li,.myitlobo li{ line-height:50px;height:50px;border:1px solid #eee;width:300px;margin:4px 0;text-indent:1em}
.itlobo li img{margin:18px 0;vertical-align:middle} /*所属line-height-自身img,input,select,object高度)/2px */
</style>
</head>

<body>
<div class="content">
<h1>我加了img的margin</h1>
<ul class="itlobo">
<li><a href="http://itlu.org/" target="_blank" title="灰狼博客">1.灰狼博客-代码演示</a> <img src="http://static.cnblogs.com/images/icon_rss.gif" /></li>
<li><a href="http://itlu.org/" target="_blank" title="灰狼博客">2.灰狼博客-代码演示</a></li>
</ul>
<h1>我没有加</h1>
<ul class="myitlobo">
<li><a href="http://itlu.org/" target="_blank" title="灰狼博客">3.灰狼博客-代码演示</a> <img src="http://static.cnblogs.com/images/icon_rss.gif" /></li>
<li><a href="http://itlu.org/" target="_blank" title="灰狼博客">4.灰狼博客-代码演示</a></li>
</ul>
</div>
</body>
</html>

对和文字相连接的img、input、textarea、select、object等元素加以属性
margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle

IE8下的浏览情况:

IE8

然后是IE6下的浏览:

IE6

这就是区别了,至于你信不信,反正我是信了.

最后来个[ demo ]

2011-08-18 update

查看 HTML ie6 vertical-align的相关文章

转载本站原创文章请注明:文章转自 灰狼IT路,链接: https://itlu.org/articles/1387.html

已有 11 条评论

  1. 回复 测试 测试

    测试测试

  2. @测试
    测试回复

  3. @测试
    我继续测试回复

  4. 貌似只有在网吧见过IE6

  5. @测试
    测试回复22

  6. 为什么不直接用height呢?

  7. 我也经常碰到这种问题,试一下,看效果如何。

  8. @万戈
    有height的呀

    @任鸟飞
    嗯嗯

  9. 初来乍到!多多指教!

  10. 回复 卡卡 卡卡

    根本不行。。。。。

    1. 能否说说是哪里的问题呢?或者你的例子是怎么写的

添加新评论