Question

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

last letter cut

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

enter image description here

正如您所看到的，看起来文本本身在两个浏览器中都呈现相同的宽度，但是在浏览器中出现问题时，包装文本的容器扩展不够。

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

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

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

如果我的客户在IE中按下刷新问题，那么页面加载一半的时间就可以了。此外，如果他检查代码并激活并重新激活其中一种样式，例如font-size，则问题会得到解决。

普通字体或

更新：

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

enter image description here

如果您无法访问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>

感谢您的帮助。

Answer 1

你试过这个：

white-space: nowrap; overflow: hidden;

请参阅此来源以获取更多详情source。

最后一封信由IE垂直剪切

1 个答案: