IE9 文本渲染问题 - 字母尾部被截断答案

【问题标题】：IE9 text rendering issue - tails on letters cut offIE9 文本渲染问题 - 字母尾部被截断
【发布时间】：2017-01-22 23:40:30
【问题描述】：

我遇到了一个问题，即在 IE9 标准模式下，IE9 以这样一种方式呈现文本，即降序字母上的尾部 - “q、p、y”等 - 消失。已尝试使用填充和其他常见的 CSS 设置来帮助解决此问题，但到目前为止还没有运气。

谁知道这可能是什么？

【问题讨论】：

您是在设计页面还是只是查看别人的页面？
line-height 是什么，您有在线示例吗？
为此我能找到的最佳解决方案是使用 box-sizing（在其众多以供应商为前缀的形式中）并将其设置为 content-box，这似乎最能模仿 IE7 的功能与盒子模型。这是我第二次使用 box-sizing 使自己免于进行浏览器嗅探，如果您以后发现自己处于类似情况，我强烈建议您研究一下！
@thynctank，@jeroen 正在努力。 line-height 是一个经常被忽视且可能导致此错误的罪魁祸首，因为如果元素的高度大于字体大小，大多数浏览器都会忽略它。
height/line-height、padding 等都是我最喜欢的东西。目前还没有在线示例，无论如何我都记得如何到达。感谢您的超级快速回复！

【解决方案1】：

编辑：我在博客上找到了这个。该链接不再存在。留下它here 以防它再次弹出。

就好像文本是输入和行高中的一个节点已在该内部元素上设置，周围元素剪切溢出的文本。

解决方案很简单，将 line-height 设置为“1”（无单位）

【讨论】：

这解决了我的问题。我发现一些帖子提到了与此相关的 DOCTYPE 标签，但在我的情况下它不起作用。
链接已损坏。还是谢谢。
我在 IE11 中遇到了类似的问题。在 ASP.NET 经典中，textarea 是自动生成的，带有 'cols=20' 和 'rows=2' 属性（如果没有在 aspx 中显式设置）。通过应用自定义 css 高度和宽度属性，我观察到相同的文本剪辑/渲染问题，但仅在第一次加载页面时（属性设置与 css 发生冲突）。当用户在 textarea 中操作文本或调整元素大小时，内容被重新渲染得很好。事实证明，确实是“行高”导致了这个问题。

【解决方案2】：

您是否使用自定义字体（@font-face），因为我发现有时在某些尺寸上使用它时，无论行高如何，它都会切断文本的尾部

【讨论】：

【解决方案3】：

我刚刚在input 上使用font: inherit 时遇到了这个问题。声明了我想要的实际字体（主要是 Verdana）并且尾部再次可见。

还在input 上测试了line-height——但这又导致了问题。

这就是我最终的结果：

body, button, input, select, textarea {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 100%;
}
body {
    line-height: 1.5;
}

【讨论】：

【解决方案4】：

在输入框上设置 line-height:inherit 对我有用。

input[type="text"], input[type="email"], input[type="password"], {
  line-height: inherit; /* for i.e. */
}

【讨论】：