Html 为什么 Firefox 会切断我的 <input type="text"/> 中的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9900018/
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 Firefox cutting off the text in my <input type="text"/>?
提问by element119
I have a simple <input type="text"/>styled with the following:
我有一个简单的<input type="text"/>样式如下：
font-size:1.5em;line-height:1.5em;padding:.6em .4em;
It displays perfectly normally in Chrome, Safari (i.e. Webkit browsers).
它在 Chrome、Safari（即 Webkit 浏览器）中完美正常显示。
However, we arrive at Firefox, and this happens:
然而，我们到达了 Firefox，这发生了：
As you can see, Firefox decides to cut off the size of the font at a certain height. Why is this happening? This problem occurs even if I remove the padding from the <input>.
如您所见，Firefox 决定在某个高度切断字体的大小。为什么会这样？即使我从<input>.
Note:
笔记：
It might help to know that the additional styles applied to this input are the default styles used in Twitter Bootstrap v.2.0.
了解应用于此输入的其他样式是 Twitter Bootstrap v.2.0 中使用的默认样式可能会有所帮助。
Here's a JSFiddle, with the exact problem I'm describing:
这是一个 JSFiddle，我描述的确切问题是：
采纳答案by KodeKreachor
Try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. Firefox's rendering engine renders line height slightly different.
尝试增加您的行高属性。这将限制字母的可视区域，导致它们被切断。Firefox 的渲染引擎渲染行高略有不同。
回答by Filip Górny
This helped me in a similar case:
这在类似的情况下帮助了我：
input.with-fancy-styling {
box-sizing: content-box;
}
回答by random_user_name
I had this problem also, and wanted to share my fix.
我也有这个问题，想分享我的修复。
First, be sure you have the proper doctype declaration, like so:
首先，确保您有正确的 doctype 声明，如下所示：
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
Even with that, I was getting minor trimming of the lower-case j, g, and y.
即便如此，我还是对小写的 j、g 和 y 进行了微调。
I inspected and found this style on the .form-controlclass:
我检查并在.form-control课堂上发现了这种风格：
.form-control {
/* other styles omitted for brevity */
height: 30px;
padding: 6px 12px;
}
Because it is using border-boxbox sizing, and I didn't want a taller box, I simply overwrote the style in my own stylesheet and reduced the padding:
因为它使用border-box盒子大小，而且我不想要一个更高的盒子，我只是在我自己的样式表中覆盖了样式并减少了填充：
.form-control {
padding: 5px 12px;
}
And it solved the issue.
它解决了这个问题。
回答by Shailender Arora
Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class
嗨，您不需要定义输入标签类的高度或提供 height:auto; 在您的输入标签类中
or see the live demo:-
或查看现场演示：-
UPDATED
更新
please check your updated css i have added line-height & height in your css and removed the padding.
请检查您更新的 css 我在您的 css 中添加了 line-height 和 height 并删除了填充。
.huge-form input, .huge-form button{
font-size:1.5em;padding:0;
line-height:31px;
height:31px;
}
or you can see the live demo:- http://jsfiddle.net/xxepX/5/
或者你可以看到现场演示：- http://jsfiddle.net/xxepX/5/
回答by Vidya
I too tried the technique of increasing 'line-height'. But it makes the text too long in height. Replacing 'line-height' with 'height' solved my issue in FF and chrome, without making it too long in height.
我也尝试了增加“行高”的技术。但它使文本的高度过长。用 'height' 替换 'line-height' 解决了我在 FF 和 chrome 中的问题，而不会使其高度过长。
回答by Stallion Susiang
With css you should not use paddingfor an input box, for indentation use text-indentinstead.
使用 css 你不应该padding用于输入框，text-indent而是用于缩进。
