Css 最后一个字母被IE垂直切割_Css_Internet Explorer_Fonts

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

css internet-explorer fonts

Css 最后一个字母被IE垂直切割,css,internet-explorer,fonts,Css,Internet Explorer,Fonts,我在的顶部导航中使用了Google字体Oswald，它在所有浏览器中都非常有效。但是，在安装在两台不同计算机上的两个不同IE11中，页面加载的一半时间会剪切某些字符串的最后一个字母：以下是IE正常工作（绿点）和IE显示问题（红点）的截图：如您所见，在两种浏览器中，文本本身的呈现宽度似乎相同，但在出现问题的浏览器中，包装文本的容器扩展不够最糟糕的是，它只发生在我客户的计算机上，我无法重现这个问题我做了一个扩展的研究，我尝试了很多事情：更改字体大小检查机器中是否未安装本地Oswald

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

以下是IE正常工作（绿点）和IE显示问题（红点）的截图：

如您所见，在两种浏览器中，文本本身的呈现宽度似乎相同，但在出现问题的浏览器中，包装文本的容器扩展不够

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

我做了一个扩展的研究，我尝试了很多事情：

更改字体大小

检查机器中是否未安装本地Oswald字体

使用从FontSquierrel下载的Oswald字体，而不是Google字体

更改字体大小、字间距、字母间距、禁用文本转换和文本阴影

激活/停用Windows ClearType

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

该问题不会发生在普通字体或

更新：

我做了一个复制这个问题的实验。我添加了另外两个使用不同Google字体的文本块，这个问题只影响Oswald字体。我的客户说，当他使用CTRL-F5而不是F5时，问题经常出现

在无法访问JSFIDLE的情况下，代码如下：

<!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>


@导入url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
@导入url(http://fonts.googleapis.com/css?family=Droid+Sans）；
@导入url(http://fonts.googleapis.com/css?family=Bowlby+1&v2）；
身体{
背景：#ccc；
}
.集装箱{
宽度：158px；
}
.容器h2 a{
文本转换：大写；
颜色：#fff；
字体大小：14px；
文本阴影：1px1px1pRGBA（0,0,0,5）；
线高：1.5em；
}
.容器h2 a：悬停{
颜色：#ecd6bc；
}
.一个h2 a集装箱{
字体系列：“Oswald”；
}
.两个h2 a{
字体系列：“Droid Sans”；
}
.三个h2 a{
字体系列：“Bowlby One”；
}

谢谢你的帮助。

你试过这个吗：

white-space: nowrap; overflow: hidden;

有关详细信息，请参阅此来源。

在使用标准字体时，您是否也看到此问题？我正在用Windows7和Windows8.1在IE11上进行测试，无法重新处理该问题。你能否构建一个简化的示例，其中包含的代码不超过说明该问题所需的代码数？@JonathanSampson，我编辑了整篇文章以回答你的问题。我制作了一个JSFIDLE示例。非常感谢。