使用 text-shadow 时 Internet Explorer 中的文本被截断

Question

我最近建立了这个网站：http://billy.fm/

如果您在 Internet Explorer 11 中打开此页面，您会看到 Samuel-613 的大标题是在右边切断。

在 IE 开发人员工具中禁用此标题上的 text-shadow 属性似乎可以解决此问题。

此外，将模糊半径更改为更大的数字也有效 - 但给我留下了我不想要的结果。

/* Does not work */
.project__title {
    text-shadow: 0 0 2px #fff;
}

/* Works */
.project__title {
    text-shadow: 0 0 10px #fff;
}

奇怪的错误 - 有什么想法吗？

我在 Windows7 上使用 Internet Explorer 11。这也可能发生在其他版本中。

Answer 1

错误：

text-shadow 中 2px 的模糊半径值导致 Win7 + IE11 错误。它是将阴影设置为更宽的值的值。设置为0或去掉，解决cut-off问题

备选方案

截断可以通过修改letter-spacing 属性.

来解决

为了保留间距并删除截止点，您可以使用当前设置达到 -0.08em。

.project__title span {
    letter-spacing: -0.08em;
}

Answer 2

正如我在评论中所说，消极 letter-spacing 导致了这个问题。您可能希望向跨度添加一些 padding-right，而根本不必调整 letter-spacing 或 text-shadow。

Text cutting off in Internet Explorer when using text-shadow