css中英文混排 标点,浅析css中英文混排时行高不一样的原因及其解决方法

不知道大家在使用IE浏览器进行css测试时，是否遇到这样一个问题：当进行中英文混合排版时，设置好的内边距属性出现偏差，导致英文和中文的行高不一样。小编就遇到过，那么为什么会出现这种情况呢？下面小编为大家简单分析一下其产生的原因。

对于产生行高不一样的原因，小编觉得关键在于中英文混合编排，所以我们不妨先分别看看全中文和全英文排版时行高的情况。

首先我们看一下全中文排版的情况，如果对文字选中，我们从背景上看上去，下面多了一部分，由此可知文本中的汉字是上对齐的。即用css术语讲就是产生了padding-bottom属性。

全中文是上对齐，那么全英文又是什么情况呢？全英文和全中文刚刚相反，是下对齐。即会出现类似padding-top的属性。

所以，这时不管是全中文还是全英文排版，行高都能保持一致。

了解了全中文和全英文排版的对齐方式后，可能你也猜到为什么把它们混合在一起会出现了行高不一样的原因了。就是因为中文与英文的对齐方式不一样，混合之后，整行文字的内边距就变为padding=padding-top+padding-bottom,相当于无形中多了一个padding-top或者padding-bottom。这样行高又怎么会一样呢？

知道产生的原因之后，我们就可以研究其解决的方法了。本来小编想使用line-height属性进行固定的，但是实践证明因为汉字的基线和英文字母不一样，所以起不到作用。那该怎么办呢？小编想到的办法是，从字体上下手，修改font-family属性。小编设置的字体是“simsun”，即我们耳熟能详的宋体，只是改用英文名字而已。

由于能力有限，改变字体是目前小编想到的唯一解决办法，但这个办法也不是太完善，它在一定程度会丢失一些效果。所以如果大家有什么更好的方法千万要记得留言给小编喔！