Subscribe to 无限摄影News FeedSubscribe to 无限摄影Comments

ie下中英文混排时文字基线高低不一致bug

七月 22, 2009 by zhanbin  
分类：web标准

评论

首先看个代码

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul>
<li>
<h3>密码找回</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
<li>
<h3>账号安全</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
<li>
<h3>邮箱续费</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
<li>
<h3>VIP朋友</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
<li>
<h3>邮箱续费</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
</ul>
?View Code CSS
1
2
3
4

ul li{ width:134px; float:left;}
ul li h3{ margin:22px 0 0 39pxcolor:#333333; font-size:14px; }
ul li .indexH3Intro{ line-height:18px; color:#666666; width:110px; margin:14px 0 22px 15px; overflow:hidden; height:55px;}
ul li p{ margin-left:15px;}

在ie下可以看到h3文字的下边线并不在同一条线上

image

解决此问题的方法有2种：

1. 设定字体全为宋体。

?View Code CSS
1

ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family:  &quot;宋体&quot;;}

image

但是应用此种方法后英文字体不是很美观，所有就有了第二种方法。

2.设定英文字体为 Arial，中文字体为宋体。同时设定行高line-height为1.231.

?View Code CSS
1

ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family: Arial, &quot;宋体&quot;; line-height:1.231}

image

相关内容

标签：, ,

评论



让我知道你的想法：(支持Gravatar头像服务)

  

  

 


         

         

6 Comments on "ie下中英文混排时文字基线高低不一致bug"

  1. 小黑 on 星期四, 15th 四 2010 5:22 下午 

    还以为是我的CSS写得有问题~~ 原来是个bug啊… 谢谢分享哦

    回复

    zhanbin Reply:
    四月 15th, 2010 at 6:44 下午

    ie 的bug还是很诡异的

    回复

  2. carp on 星期二, 31st 八 2010 6:28 下午 

    诡异的bug总有诡异的解决办法，第二招太完美了，收藏了！

    回复

    carp Reply:
    八月 31st, 2010 at 6:32 下午

    @carp,
    对了，最后那个“line-height:1.231” 应该是“line-height:1.231em”才对

    回复

    zhanbin Reply:
    八月 31st, 2010 at 9:51 下午

    在这里如果不写单位默认就是以 em 为单位的 ：）

    回复

  3. 一些兼容问题（二） « 秘密花园 on 星期六, 9th 十 2010 12:33 下午 

    [...] http://gigalens.com/2009-07/webstandards-ie6-typographiy-bug.html [...]