新浪UED

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

by 小秦 / 博客,网页重构 / 2009-07-22
ie下中英文混排时文字基线高低不一致bug

首先看个代码

<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>

 

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. 设定字体全为宋体。

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

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

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

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

image

350-001  
1Y0-201  
NSE4  
HP0-S42  
EX200  
70-417  
2V0-621  
200-125  ,
352-001  
70-246  
MB2-707  
VCP550  
LX0-103  
ICGB  
9A0-385  
200-120  
350-029  
JN0-102  
CAP  
000-105  
ITILFND  
70-488  
ICBB  
ICGB  
220-902  
1Z0-060  
ITILFND  
JK0-022  
JN0-102  
JN0-360  
LX0-103  
LX0-104  
M70-101  
MB2-704  
MB2-707  
MB5-705  
MB6-703  
N10-006  
NS0-157  
NSE4  
OG0-091  
OG0-093  
PEGACPBA71V1  
PMP  
PR000041  
SSCP  
SY0-401  
VCP550  

300-208
EX0-001
70-534
C9010-022
1Z0-241
70-411
M2040-641
70-534
70-247
642-999
1Z0-434
642-902
C8010-726
P2090-025
M2040-671
P2070-093
1Z0-144
000-030
1Z0-574
EX200
220-901
700-039
ICBB
640-692
000-031
98-369
352-001  
1Z0-804  
74-678  
70-411  
JN0-102  
1z0-808  
200-101  
220-901  
1Z0-060  
CRISC  
500-260  
HP0-S42  
AWS-SYSOPS  
70-246  
200-125  ,
300-075  
NSE4  
1z0-434  
350-030  
JN0-102  
70-412  
642-999  
CAP  
C_TFIN52_66  
OG0-091  
70-413  
70-980  
EX200  
70-486  
9A0-385  
350-080  

文章评论

  1. 学习了,经常看你们UED的文章;

  2. 亚瑟 说:

    学习了,原来如此啊,,软文

  3. ADD~`` 说:

    这个是什么原理呢? 字号变化之后, 会不会有新的问题?

发表评论

电子邮件地址不会被公开。 必填项已用*标注

* 验证图片 刷新验证码

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>