如何删除Internet Explorer中下标2后的额外空间

Question

我正在构建一个使用下标2的网站，如在H 2 O中。该2是用HTML代码₂而不是标签创建的。

问题出在这里，在IE浏览器中有一个大的空间。我怎样才能解决这个问题#css？

在IE9

网站的截图

Answer 1

这是一个字体问题。没有完美的解决方案，因为the page使用SUBSCRIPT TWO字符（原则上这很好） - 不是用任何HTML代码，而是用UTF-8编码的字符（这很好），它使用Open Sans字体是一个很好的字体，但不包含SUBSCRIPT TWO。这意味着浏览器将使用一些后备字体，并且IE似乎使用字体，其中SUBSCRIPT TWO的字形在图形的右侧有很多空间（您可以通过用鼠标绘制字符来看到这一点;后备字体在IE中似乎是这样的巴东在这种情况下）。

有两种方法可以解决这个问题。

您可以在font-family声明中列出您首选的备用字体。在您的CSS规则body中，而不仅仅是font-family: 'Open Sans'，您可以使用例如

font-family: 'Open Sans', 'Calibri', 'Arial Unicode MS', 'DejaVu Sans', 'FreeSans', 
    'Lucida Sans Unicode'; 

这很难说，你应该把什么入名单及顺序，但上面应涵盖几乎所有浏览的情况下，用可容忍的渲染效果。仍然存在混合不同字体的字形的问题，所以结果不会是好的。为了获得最佳效果，下标应该来自与其他字符相同的字体。

另一种方法是使用不同的基本字体而不是Open Sans。在Google字体中，您可能会考虑Source Sans Pro。这是一个很好的sans-serif字体家族，有许多字体（重量从200开始），它包含SUBSCRIPT TWO;您需要在Google Web Fonts上选中时选中“Latin Extended（latin-ext）”框，否则不会包含SUBSCRIPT TWO。