gpt4 book ai didi

css - 最后一个字母被IE竖切

转载 作者:行者123 更新时间:2023-12-04 19:57:11 27 4
gpt4 key购买 nike

我在 this website 的顶部导航栏中使用 Google 字体 Oswald它适用于所有浏览器。但是,在两个不同的 IE11 中,安装在两台不同的计算机上,页面加载的一半时间某些字符串的最后一个字母被剪切:

last letter cut

这些是 IE 正常工作(绿点)和显示问题的 IE(红点)的截图:

enter image description here

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

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

我进行了广泛的研究并尝试了很多东西:

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

如果我的客户在出现问题的 IE 中按刷新,则页面加载成功的次数有一半。此外,如果他检查代码并激活并重新激活其中一种样式(例如字体大小),问题就会得到解决。

普通字体或

不会出现此问题

更新:

我做了一个jsfiddle minimum model重现了这个问题。我添加了另外两个使用不同谷歌字体的文本 block ,这个问题只影响 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>

感谢您的帮助。

最佳答案

你试过这个吗:

white-space: nowrap; overflow: hidden;

有关更多详细信息,请参阅此来源 source .

关于css - 最后一个字母被IE竖切,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26683695/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com