代码之家  ›  专栏  ›  技术社区  ›  alex

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

  •  8
  • alex  · 技术社区  · 16 年前

    看起来像 (但它没有)它被放置在一个较小的元素中 overflow: hidden; .

    有人知道如何补救吗?

    3 回复  |  直到 14 年前
        1
  •  31
  •   Community CDub    8 年前

    您需要指定线条高度以匹配字体大小。..

    层叠样式表

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

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

        2
  •  0
  •   Allen    12 年前

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

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

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

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

    (d) “垂直对齐”为文本框内的文本提供了一个参考点。

    因此,作为一个例子,我使用以下CSS与CSS样式表的“input=text”区域相关,使文本显示在我网站上文本框的中间行(没有截断),并且与文本框边框有一段很好的距离:

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

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

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

    希望这能有所帮助。

        3
  •  -2
  •   Jon Winstanley    16 年前

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

    Overflow: auto;
    

    Overflow: Visible;
    
    推荐文章