搞清楚CSS中单位px与em之间的关系和特点

在网页设计中，字体单位的选择至关重要。常见的两种单位px和em各有其特点，但在实际应用中却常常被混淆使用。px像素是相对显示器屏幕分辨率而言的，而em则是相对于当前对象内文本的字体尺寸。在实际操作中，我们往往更倾向于使用px来定义字体，这使得很多网站无法充分利用浏览器的字体放大功能。尤其在国内，大多数网站在IE浏览器下无法调整字体大小，这也成为了一个用户体验的痛点。

国外的大部分网站之所以能够在IE下使用字体放大功能，关键在于它们采用了em作为字体单位。相较于px，em具有更好的灵活性和适应性。它不仅能够随着父级元素的字体大小变化而变化，还能在不同浏览器中保持一致的显示效果。而Firefox等浏览器虽然能够调整px和em的字体大小，但在中国，96%以上的网民使用的是IE浏览器或其内核，选择适合的字体单位显得尤为重要。

为了解决这一问题，我们需要重新考虑CSS中的字体单位选择。在body选择器中声明Font-size=62.5%，这样可以使em的值与常见的px值相对应。然后，将原来的px数值除以10，换成em作为单位。这样就可以简化font-size的换算，同时使网站在IE浏览器下也能正常显示字体放大功能。在实际应用中，我们还需要注意避免字体大小的重复声明，以免出现意外的显示效果。

值得一提的是，汉字在IE浏览器中的显示问题。由上述方法得到的12px（1.2em）大小的汉字在IE中并不等于直接用12px定义的字体大小，而是会稍大一点。对于这一问题，Jorux已经给出了解决方案：在body选择器中把62.5%换成63%。据说这可能是IE在处理汉字时，对浮点数的取值精确度有限所导致的。