IE9 文本渲染问题 - 字母尾部被切断

发布于 2024-11-07 23:39:48 字数 120 浏览 0 评论 0原文

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

谁知道这可能是什么?

I'm running into an issue where - in IE9 standards mode - IE9 renders text in such a way that the tails on descending letters - "q, p, y" etc - disappear. Have tried playing with padding and other common CSS settings in helps of fixing this but am having no luck so far.

Who's got an idea what this might be?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

孤独陪着我 2024-11-14 23:39:48

编辑:我在博客上找到了这个。该链接不再有效。将其留在此处以防再次弹出。

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

解决办法很简单,将line-height设置为“1”(无单位)

EDIT: I found this on a blog. The link isn't live anymore. Leaving it here just in case it pops up again.

Its as though the text is a node inside the input and the line-height
has been set on that inner element, with the surrounding element
clipping the overflowing text.

The solution is simple, set the line-height to be “1” (no-units)

毁梦 2024-11-14 23:39:48

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

Are you using a custom font (@font-face) as i found that sometimes when using that on certain sizes it would cut off the tails on text, regardless of line-height

夜空下最亮的亮点 2024-11-14 23:39:48

我刚刚在 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;
}

I just had this problem using font: inherit on input. Declared the actual fonts I wanted (Verdana primarily) and the tails are visible again.

Also tested line-height on input—but that caused the problem again.

This is what I ended up with:

body, button, input, select, textarea {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 100%;
}
body {
    line-height: 1.5;
}
帅冕 2024-11-14 23:39:48

在输入框中设置 line-height:inherit 对我来说很有效。

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

This setting the line-height:inherit on input boxes did the trick for me.

input[type="text"], input[type="email"], input[type="password"], {
  line-height: inherit; /* for i.e. */
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文