网页中英文混排行高不等问题的解决方法

混合排版下的文字排列问题

你是否在IE浏览器（版本6或7，尚未尝试版本8）中遇到过这样的困扰：当页面中同时存在中英文混排，且都使用默认字体时，使用 li 列表做float布局时，文字会出现上下不对齐的现象。这一问题，犹如一块心病，困扰着许多开发者。今天就来深入剖析一下这个问题。

症状表现及原因

在IE浏览器（特指版本6和7）下，中英文混排时，由于中英文的基线存在差异，使得文字排列出现上下不对齐的情况。具体来说，arial字体的下边缘要比宋体（同为12号）低一个像素，上边缘则低两个像素。英文中的一些字母如i和y，其上下基线也存在差异。这些因素叠加在一起，导致中英文混排时，文字排列出现高度差异，影响整体美观。

解决方案一：字体选择调整

一种解决方案是采用宋体来解决文字排列不对齐的问题。宋体作为中文字体，其基线较为统一，能够在一定程度上解决中英文混排的对齐问题。宋体作为衬线字体，其字型紧凑、细节丰富，虽然醒目，但在连续文本中可能导致辨识困扰，容易出现看错行的情况。相比之下，无衬线字体在英文排版中更为美观大方。

方法分享：“饺子”童鞋的发现

一种值得尝试的解决方案是，英文采用tahoma字体。与arial字体相比，tahoma的无衬线体更为精致。在IE6及IE6以下版本中，使用tahoma字体可能会导致所有中文字体链接的下划线与字体粘连。尽管如此，对于大型项目而言，统一字体规范、减少错位现象仍是首要考虑的因素。淘宝也采用了类似的解决方案。

方法分享：携同大米童鞋的发现

另一种可能的解决方案是，英文采用arial字体，中文使用宋体。在``标签内注明`line-height:1.231`，可以解决行高不等以及字体与下划线粘连问题。这一方案的具体适用性还需在实际应用中进一步验证。