ie下中英文混排时文字基线高低不一致bug
首先看个代码
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> |
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文字的下边线并不在同一条线上
解决此问题的方法有2种：
1. 设定字体全为宋体。
1 | ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family: "宋体";} |
但是应用此种方法后英文字体不是很美观，所有就有了第二种方法。
2.设定英文字体为 Arial，中文字体为宋体。同时设定行高line-height为1.231.
1 | ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family: Arial, "宋体"; line-height:1.231} |
