IE下line-height的BUG解决

最新推荐文章于 2017-05-12 08:19:00 发布

原创最新推荐文章于 2017-05-12 08:19:00 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Internet Explorer浏览器中解决line-height失效的问题。当容器内的文字与img、input等元素相邻时，设置的line-height可能无法生效。解决方法是对这些元素应用特定的margin和vertical-align样式。

IE下line-height的BUG解决

2008-03-20 08:34 322人阅读评论(0) 收藏举报

BUG症状：当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；

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

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

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

　　检验好用，不过用户具体使用中要留意设置属性的img、input等很可能不是全局设置，这个时候就要灵活处理，比如一个页面有两个不同line-height属性的容器A(class="a")和容器B(class="b")里都有img、input等，如果是B处遇到此bug，则css里写* .b img {...}等等，这样不影响A容器的css显示，千万不要写* html img {...}，因为后者是全局设置。