I have a simple <input type="text"/> styled with the following:
我有一个简单的样式与以下内容:
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决定在某个高度切断字体的大小。为什么会这样?即使我从中删除填充,也会出现此问题。
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,我正在描述的确切问题:
6 个解决方案
#1
12
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的渲染引擎渲染行高略有不同。
#2
6
This helped me in a similar case:
这帮助了我类似的情况:
input.with-fancy-styling {
box-sizing: content-box;
}
#3
2
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">
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-control class:
我检查并在.form-control类上找到了这个样式:
.form-control {
/* other styles omitted for brevity */
height: 30px;
padding: 6px 12px;
}
Because it is using border-box box sizing, and I didn't want a taller box, I simply overwrote the style in my own stylesheet and reduced the padding:
因为它使用的是边框框尺寸,而我不想要更高的框,我只是在我自己的样式表中覆盖了样式并减少了填充:
.form-control {
padding: 5px 12px;
}
And it solved the issue.
它解决了这个问题。
#4
1
Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class
嗨,您不需要定义输入标签类的高度或给出高度: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中添加了行高和高度并删除了填充。
.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/
#5
0
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.
我也尝试过增加'line-height'的技巧。但它使文本的高度太长。将'line-height'替换为'height'解决了我在FF和chrome中的问题,而没有使它的高度太长。
#6
-1
With css you should not use padding for an input box, for indentation use text-indent instead.
使用css你不应该使用填充作为输入框,缩进使用文本缩进代替。
#1
12
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的渲染引擎渲染行高略有不同。
#2
6
This helped me in a similar case:
这帮助了我类似的情况:
input.with-fancy-styling {
box-sizing: content-box;
}
#3
2
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">
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-control class:
我检查并在.form-control类上找到了这个样式:
.form-control {
/* other styles omitted for brevity */
height: 30px;
padding: 6px 12px;
}
Because it is using border-box box sizing, and I didn't want a taller box, I simply overwrote the style in my own stylesheet and reduced the padding:
因为它使用的是边框框尺寸,而我不想要更高的框,我只是在我自己的样式表中覆盖了样式并减少了填充:
.form-control {
padding: 5px 12px;
}
And it solved the issue.
它解决了这个问题。
#4
1
Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class
嗨,您不需要定义输入标签类的高度或给出高度: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中添加了行高和高度并删除了填充。
.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/
#5
0
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.
我也尝试过增加'line-height'的技巧。但它使文本的高度太长。将'line-height'替换为'height'解决了我在FF和chrome中的问题,而没有使它的高度太长。
#6
-1
With css you should not use padding for an input box, for indentation use text-indent instead.
使用css你不应该使用填充作为输入框,缩进使用文本缩进代替。