CSS 为什么我的文字在 IE7 中被截断？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/699653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my text being cut off in IE7?
提问by alex
The text on my web page looks fine in Firefox & Safari, but in IE7 certain portions are cut off. It looks like(but it hasn't) it has been placed in a smaller element with overflow: hidden;.
我网页上的文字在 Firefox 和 Safari 中看起来不错，但在 IE7 中某些部分被切断了。它看起来（但没有）它被放置在一个较小的元素中，带有overflow: hidden;.
Anyone know how to remedy this?
有谁知道如何解决这个问题？
回答by alex
You need to specify the line height to match the font size...
您需要指定行高以匹配字体大小...
CSS
CSS
h1 {
font-size: 2em;
line-height: 2em; /* or 100% */
}
See also IE7 is clipping my text. How do I adjust its attitude?
回答by Allen
I had the same problem for IE9 and spent a lot of time fiddling around with the attributes for "height", "line-height" and "padding". Here's what I came up with:
我在 IE9 上遇到了同样的问题，花了很多时间摆弄“高度”、“行高”和“填充”的属性。这是我想出的：
(a) "height" does not affect what's happening inside the textbox;
(a) “高度”不影响文本框内发生的事情；
(b) "line-height" does affect the display of the text and will cause it to be higher or lower in the text box, but the number is important. In the end the first answer seems to be correct i.e. set "line-height" to the same number as your font size;
(b) "line-height" 确实会影响文本的显示，会导致它在文本框中变高或变低，但数字很重要。最后，第一个答案似乎是正确的，即将“行高”设置为与字体大小相同的数字；
(c) "padding" also affects the display of text because it creates the space between the borders of the textbox and the text itself;
(c) “padding”也会影响文本的显示，因为它会在文本框的边框和文本本身之间产生空间；
(d) "vertical-align" provides a reference point for the text inside the textbox.
(d) “vertical-align”为文本框内的文本提供参考点。
So, as an example, I got the text to display in the mid-line of the textbox on my site (with no cut off) and a nice distance from the textbox borders by using the following CSS in relation to the "input=text" area of my CSS style sheet:
因此，作为一个例子，我通过使用以下与“input=text " 我的 CSS 样式表的区域：
line-height: 14px; padding: 6px 2px 6px 2px; vertical-align: middle;
The 14px was the size of the font used in my template (stated elsewhere in the CSS style sheet), the 6px is top and bottom padding respectively and the 2px is the left and right padding respectively. The vertical align attribute places a notional middle line through the text. Obviously you can change any of those numbers to suit your requirements.
14px 是我模板中使用的字体大小（在 CSS 样式表的其他地方说明），6px 分别是顶部和底部填充，2px 分别是左右填充。垂直对齐属性在文本中放置了一条名义上的中线。显然，您可以更改这些数字中的任何一个以满足您的要求。
BTW, for newbies, use the firefox "firebug" plugin to find the code in your CSS syle sheet that needs changing. Just highlight the text box in question and on the right it will give the name of the CSS style sheet its location and line number where the code appears. You can even use "firebug" to do a live test run which will show you the effect of the changes, but which will not be saved when you close your browser : )
顺便说一句，对于新手，请使用 firefox 的“firebug”插件来查找 CSS 样式表中需要更改的代码。只需突出显示有问题的文本框，它就会在右侧给出 CSS 样式表的名称，其位置和代码出现的行号。您甚至可以使用“firebug”进行实时测试运行，它会向您显示更改的效果，但在您关闭浏览器时不会保存：)
Hope this helps.
希望这可以帮助。
回答by Jon Winstanley
Try changing the overflow attribute for the element the text is in.
尝试更改文本所在元素的溢出属性。
Overflow: auto;
Or
或者
Overflow: Visible;
