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="https://itlu.net/" target="_blank" title="灰狼博客">1.灰狼博客-代码演示</a> <img src='/index/thumb.png' data-original="http://static.cnblogs.com/images/icon_rss.gif" /></li>
<li><a href="https://itlu.net/" target="_blank" title="灰狼博客">2.灰狼博客-代码演示</a></li>
</ul>
<h1>我没有加</h1>
<ul class="myitlobo">
<li><a href="https://itlu.net/" target="_blank" title="灰狼博客">3.灰狼博客-代码演示</a> <img src='/index/thumb.png' data-original="http://static.cnblogs.com/images/icon_rss.gif" /></li>
<li><a href="https://itlu.net/" 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下的浏览情况:
然后是IE6下的浏览:
这就是区别了,至于你信不信,反正我是信了.
最后来个[ demo ]
2011-08-18 update
查看 HTML ie6 vertical-align的相关文章
转载本站原创文章请注明：文章转自 挨踢路，链接: https://itlu.net/articles/1387.html
测试测试
@测试
测试回复
@测试
我继续测试回复
貌似只有在网吧见过IE6
@测试
测试回复22
为什么不直接用height呢？
我也经常碰到这种问题，试一下，看效果如何。
@万戈
有height的呀
@任鸟飞
嗯嗯
初来乍到！多多指教！
根本不行。。。。。
能否说说是哪里的问题呢？或者你的例子是怎么写的