最后一个字母被IE垂直切割答案

【问题标题】：Last letter vertical cut by IE最后一个字母被IE垂直切割
【发布时间】：2015-08-21 20:05:35
【问题描述】：

我在this website 的顶部导航中使用Google 字体Oswald，它在所有浏览器中都很好用。但是，在两个不同的 IE11 中，安装在两台不同的计算机上，页面加载一半的时候，某些字符串的最后一个字母被剪掉了：

这些是 IE 工作正常（绿点）和 IE 显示问题（红点）的捕获：

如您所见，看起来文本本身在两个浏览器中以相同的宽度呈现，但在存在问题的浏览器中，包裹文本的容器扩展不足。

最糟糕的是，它只发生在我客户的计算机上，我无法重现该问题。

我进行了扩展研究并尝试了很多方法：

更改字体粗细
检查机器中没有安装本地 Oswald 字体
使用从 Font Squierrel 下载的 Oswald 字体，而不是 Google 字体
更改字体大小、字间距、字母间距、停用文本转换和文本阴影
激活/停用 Windows ClearType

如果我的客户在出现问题的 IE 中按刷新，则页面加载正常的一半时间。此外，如果他检查代码并激活并重新激活其中一种样式（例如字体大小），问题就会解决。

普通字体或

不会出现此问题

更新：

我创建了一个jsfiddle minimum model 来重现该问题。我使用不同的 Google 字体添加了另外两个文本块，该问题仅影响 Oswald 字体。我的客户说，当他使用 CTRL-F5 而不是 F5 时，这个问题经常出现。

如果你无法访问 jsfiddle，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type='text/css'>
            @import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
            @import url(http://fonts.googleapis.com/css?family=Droid+Sans);
            @import url(http://fonts.googleapis.com/css?family=Bowlby+One&v2);
            body {
                background: #ccc;
            }
            .container {
                width: 158px;
            }
            .container h2 a {
                text-transform: uppercase;
                color: #fff;
                font-size: 14px;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
                line-height: 1.5em;
            }
            .container h2 a:hover {
                color: #ecd6bc;
            }
            .container.one h2 a {
                font-family: 'Oswald';
            }
            .container.two h2 a {
                font-family: 'Droid Sans';
            }
            .container.three h2 a {
                font-family: 'Bowlby One';
            }
        </style>
    </head>
    <body>
        <div class="container one">
            <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2>
        </div>
        <div class="container two">
            <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2>
        </div>
        <div class="container three">
            <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2>
        </div>
    </body>
</html>

感谢您的帮助。

【问题讨论】：

您在使用标准字体时是否也看到此问题？我正在使用 Windows 7 和 Windows 8.1 在 IE11 上进行测试，但无法重现该问题。您能否构建一个简化的示例，其中包含的代码不超过说明问题所需的代码？
@JonathanSampson，我编辑了整篇文章以回答您的问题。我做了一个jsfiddle例子。谢谢。

标签： css internet-explorer fonts

【解决方案1】：

你试过了吗：

white-space: nowrap; overflow: hidden;

更多详情请参考此来源source。

【讨论】：