底部几个像素的文本被截断答案

【问题标题】：Bottom few pixels of text cut off底部几个像素的文本被截断
【发布时间】：2011-10-13 20:42:55
【问题描述】：

我真的不知道在这种情况下发生了什么。在多行文本中，底部的几个像素被截断。

【问题讨论】：

在 Firefox 上看起来不错。您在哪个浏览器中看到此问题？
在 Chrome 中看起来也不错。也许屏幕帽会有所帮助？
i51.tinypic.com/n6faqg.png g 和 y 之类的字母，其底部延伸超过某个点。
顺便说一句，只在第二行。第一行很好。
请不要发布指向您的代码的实时链接，否则只要您解决此问题，您的问题就会过时。相反，请尝试在小提琴中使用缩小的代码来重现问题，并将代码放在这里以使您的问题“独立”

标签： html css

【解决方案1】：

设置

line-height: normal;

为我工作。

【讨论】：

@Reece 您应该接受这个答案，以便获得更多可见性。它解决了我的问题

【解决方案2】：

最快的修复方法如下：

将此处的 font-size 从 14px 更改为 13px

#slidertext h3 {
font-size: 13px;
// other styles
}

在 Chrome 中为我工作。

【讨论】：

使用这个。文本仍然看起来不错，并且没有任何复杂性。还允许更长的提交时间，而不会在未来增加复杂性。谢谢。
这实际上并不能解决问题，这是一个行高问题。如下所述，设置line-height: normal; 是解决方法

【解决方案3】：

更改 font-size 和 font-family 只是一种解决方法。我有同样的问题。它在 Firefox 中运行良好，但在 Chrome 中却不行。勾选输入框的padding或margin。在我的情况下是padding。我将padding:6px 更改为padding:0px 6px;。

【讨论】：

【解决方案4】：

在#slidertext li 上，您设置了overflow: hidden;。您要么需要调整 li 的高度，将内联样式设置为 height: 32px，关闭溢出，要么调整其中的字体大小。

【讨论】：

【解决方案5】：

根据特定的浏览器，此类问题通常与字体系列有关。我对文本被截断的解决方案是将字体系列更改为sans-serif，看看这是否有任何效果。这在我尝试过的任何浏览器上都有效。

正如上面其他线程所说的那样......有时调整行高和填充可能会有所帮助，但对我来说，这些都不起作用：

max-width: 100%;
min-height: 1.62em;
padding: 2px 5px 2px 5px;    
vertical-align: initial;

font-family: initial, sans-serif, serif; 是一个很好的起点，然后您可以找到适合您的主题/网站的字体。

【讨论】：

【解决方案6】：

这个修复我的：

letter-spacing: normal;

【讨论】：

【解决方案7】：

对我来说是font-kerning。它的默认值为auto，这意味着它正在使用存储在字体中的字距调整信息。我把它改成正常的，它解决了这个问题。

input {
  font-kerning: normal;
}

【讨论】：

【解决方案8】：

大多数情况下，如果字体从底部截断，说明我们正在使用，如果有帮助，请在下面尝试overflow:hidden;

为了解决这个问题，请使用，

overflow-x:hidden;
line-height: according to your style-guide (1/1.5//normal);

// 你可以根据你的风格指南增加和减少线）

.

【讨论】：

【解决方案9】：

检查 sliderwrap 的大小，height 属性可能与总文本大小冲突，并且由于您的溢出是隐藏的，根据您的 css 属性，这可能是您的问题。

也许可以这样修复：

#sliderwrap
{
    height:114;
}

【讨论】：