为什么我的文字在IE7中被截断?

时间:2009-03-31 01:00:20

标签: css internet-explorer-7

我的网页上的文字在Firefox& Safari,但在IE7中某些部分被切断了。 看起来像(但它没有)它被放置在一个带有overflow: hidden;的较小元素中。

任何人都知道如何解决这个问题?

3 个答案:

答案 0 :(得分:32)

您需要指定行高以匹配字体大小...

CSS

h1 {
   font-size: 2em;
   line-height: 2em; /* or 100% */
}

另见IE7 is clipping my text. How do I adjust its attitude?

答案 1 :(得分:0)

我在IE9上遇到了同样的问题,花了很多时间摆弄“高度”,“行高”和“填充”的属性。这就是我想出的:

(a)“身高”不影响文本框内发生的事情;

(b)“line-height”会影响文本的显示,并会使文本框中的文本更高或更低,但数字很重要。最后,第一个答案似乎是正确的,即将“line-height”设置为与字体大小相同的数字;

(c)“填充”也会影响文本的显示,因为它会在文本框的边框和文本本身之间创建空间;

(d)“vertical-align”为文本框内的文本提供参考点。

因此,作为一个例子,我将文本显示在我网站上文本框的中间行(没有剪切),并且通过使用以下CSS与文本框边界相距很远input = text“我的CSS样式表的区域:

   line-height: 14px; padding: 6px 2px 6px 2px; vertical-align: middle;

14px是我模板中使用的字体大小(在CSS样式表的其他地方说明),6px分别是顶部和底部填充,2px分别是左右填充。垂直对齐属性在文本中放置一个名义中间线。显然,您可以更改任何这些数字以满足您的要求。

BTW,对于新手来说,使用firefox“firebug”插件来查找CSS syle表中需要更改的代码。只需突出显示相关文本框,右侧将显示CSS样式表的名称,其位置和代码显示的行号。您甚至可以使用“firebug”进行实时测试运行,它将显示更改的效果,但在您关闭浏览器时不会保存:)

希望这有帮助。

答案 2 :(得分:-2)

尝试更改文本所在元素的overflow属性。

Overflow: auto;

Overflow: Visible;