Why is Firefox cutting off the text in my <inpu

2019-06-15 01:56发布

站内问答 / HTML/CSS
655 6 5

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).

However, we arrive at Firefox, and this happens:

Why is this happening? Gah!

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>.

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.

Here's a JSFiddle, with the exact problem I'm describing:

http://jsfiddle.net/xxepX/

标签： html css layout
举报
6条回答
太酷不给撩
2楼-- · 2019-06-15 02:26

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.

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
3楼-- · 2019-06-15 02:31

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.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2019-06-15 02:32

This helped me in a similar case:

input.with-fancy-styling {
    box-sizing: content-box;
}
查看更多
0人赞 添加讨论(0) 举报
做个烂人
5楼-- · 2019-06-15 02:38

Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class

or see the live demo:-

http://jsfiddle.net/xxepX/2/

UPDATED

please check your updated css i have added line-height & height in your css and removed the padding.

.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/

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
6楼-- · 2019-06-15 02:38

With css you should not use padding for an input box, for indentation use text-indent instead.

查看更多
0人赞 添加讨论(0) 举报
做个烂人
7楼-- · 2019-06-15 02:41

I had this problem also, and wanted to share my fix.

First, be sure you have the proper doctype declaration, like so:

<!DOCTYPE html> <html lang="en">

Even with that, I was getting minor trimming of the lower-case j, g, and y.

I inspected and found this style on the .form-control class:

.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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)