IE 下的 “letter-spacing”及 “line-height” BUG

http://www.ctba.cn/blog/entry/1884

昨天用 ie6/7 看扯谈博客(白、黑皮肤)时发现,上下文与图片紧紧贴在了一起,而其他浏览器中都有一定的间隔。firebug 了下,发现文字段落换行以及文字与图片的上下排列都是通过两个 <br /> 完成的,按说是应该有间隔的,仔细检查了 css,没有发现对行间距和 <br /> 标签做特殊设置。再对比扯谈其他文章页面均,没有类似情况,郁闷之时突然想到扯谈博客中对字间距做了设置

letter-spacing: 0.05em;


试着去掉,问题竟然好了 -__-!  但我还想保持 0.05em 的字间距,又试着为失效的 <br /> 单独做了定义

br {letter-spacing:0;}


改完就彻底没事了,原来还真没遇到过这类问题,也是因为很少设置字间距,这次长见识了 -__-

接下来说说 ie6 下文字与其他元素 (img、input、textarea、select、object) 混排时 line-height 失效的问题,这个问题是很早就遇到过,但一直没找到好的解决方法,一般也都是绕到而行,比如为元素包一层标签,然后为标签设置 margin;昨天搜到个新的解决办法,原理大同小异,而且要想遍历到整个网页,单纯的 css 是搞不定的,但给出了精确的计算式,收做参考。

解决方法:
对和文字相连接的元素添加属性:

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


解决方法原文在此: Microsoft Internet Explorer 6: Line-height / Replaced Element Bug

你可能感兴趣的:(css,浏览器,Firebug,IE,Microsoft)