为什么Safari& Firefox切断输入文本的底部？ [英] Why does Safari & Firefox cut off bottom of input text?

问题描述

我要什么

Chrome

在Chrome，输入文字看起来很正常。

发生了什么

Firefox

Safari

正如您所看到的，Firefox的底部输入文本被略微切断，并在Safari上被大量切断。如何才能解决这个问题？

如果有人可以帮忙，这将是不胜感激！

代码

HTML

 < div class =row page-header> 
< div class =col-xs-10> 
< div class =form-group> 
< input type =textname =Worksheet-Nameclass =form-control input-lgplaceholder =工作表名称...aria-label =在此写入工作表名称> < / DIV> 
< / div> 
< / div> 
  

CSS

  / *悬停或点击输入框时添加边框* / 
 input [type =text] {
 outline：none; 
 box-shadow：none！important; 
 border：1px纯白色; / *通过转换与背景相同的颜色使边框变为可见* / 
} 
 
 input [type =text]：悬停，输入[type =text]：focus {
 border：1px solid #cccccc; 
 border-radius：8px; 
 
 $ b $ *样式输入文本框* / 
 input [type ='text'] [name ='Worksheet-Name'] {
 font-size ：36px; 
 margin-top：20px; 
 margin-left：15px; 
 
 
 input [type ='text'] [name ='Worksheet-Problem'] {
 font-size：20px; 
} 
 
 / *更改占位符* / 
 input [type ='text'] [name ='Worksheet-Name']： -  webkit-input-placeholder { * Chrome / Opera / Safari * / 
 font-weight：500; 
 font-size：36px; 
 
 input [type ='text'] [name ='Worksheet-Name'] ::  -  moz-placeholder {/ * Firefox 19+ * / 
 font-weight：500; 
 font-size：36px; 
 
 input [type ='text'] [name ='Worksheet-Name']： -  ms-input-placeholder {/ * IE 10+ * / 
 font-weight：500 ; 
 font-size：36px; 
 
 input [type ='text'] [name ='Worksheet-Name']： -  moz-placeholder {/ * Firefox 18- * / 
 font-weight：500; 
 font-size：36px; 
 
 $ b $ / *改变占位符* / 
 input [type ='text'] [name ='Worksheet-Problem'] ::  -  webkit-input-placeholder { * Chrome / Opera / Safari * / 
 font-weight：400; 
 font-size：20px; 
 
 input [type ='text'] [name ='Worksheet-Problem'] ::  -  moz-placeholder {/ * Firefox 19+ * / 
 font-weight：400; 
 font-size：20px; 
 
 input [type ='text'] [name ='Worksheet-Problem']： -  ms-input-placeholder {/ * IE 10+ * / 
 font-weight：400 ; 
 font-size：20px; 
 
 input [type ='text'] [name ='Worksheet-Problem']： -  moz-placeholder {/ * Firefox 18- * / 
 font-weight：400; 
 font-size：20px; 
 
  

JSFiddle

解决方案

您可以减少底部填充和/或字体大小，这将解决您的溢出问题。

  input [type ='text'] [name ='Worksheet-Name'] {
 font-size：35px; //而不是36 
 margin-top：20px; 
 margin-left：15px; 
 
 code $ 
 
 $ b $或b 
 $ b $ pre>  .input-lg {
 height：46px; 
 padding：10px 16px 0; //更改为0 
 font-size：18px; 
 line-height：1.33333; 
 border-radius：6px; 
} 
  

也可以在这里用line-height：
为什么Firefox将我的< input type =" text" /> ;?

What I want

Chrome On Chrome, the input text looks normal.

What is happening

Firefox

Safari

As you can see, the input text is being slightly cut off at the bottom on Firefox and majorly cut off on Safari. How can I fix that?

If anyone could help w/ this it would be greatly appreciated!

Code

HTML

        <div class="row page-header">
            <div class="col-xs-10">
                <div class="form-group">
                    <input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"> </div>
            </div>
        </div>

CSS

/*Add borders when hover or click on input boxes*/
input[type="text"] {
    outline: none;
    box-shadow:none !important;
    border: 1px solid white; /*make the borders invisble by turning same color as background*/
}

input[type="text"]:hover, input[type="text"]:focus{
    border: 1px solid #cccccc;
    border-radius: 8px;
}

/*Style input text boxes*/
input[type='text'][name='Worksheet-Name']{
    font-size: 36px;
    margin-top: 20px;
    margin-left: 15px;
}

input[type='text'][name='Worksheet-Problem']{
    font-size: 20px;
}

/*Change placeholder*/
input[type='text'][name='Worksheet-Name']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-weight: 500; 
    font-size: 36px;
}
input[type='text'][name='Worksheet-Name']::-moz-placeholder { /* Firefox 19+ */
    font-weight: 500;
    font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-ms-input-placeholder { /* IE 10+ */
    font-weight: 500;
    font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-moz-placeholder { /* Firefox 18- */
    font-weight: 500;
    font-size: 36px;
}

/*Change placeholder*/
input[type='text'][name='Worksheet-Problem']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-weight: 400; 
    font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']::-moz-placeholder { /* Firefox 19+ */
    font-weight: 400;
    font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-ms-input-placeholder { /* IE 10+ */
    font-weight: 400;
    font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-moz-placeholder { /* Firefox 18- */
    font-weight: 400;
    font-size: 20px;
}

JSFiddle

解决方案

You can reduce the bottom padding and/or the font size and that will fix your overflow issue.

input[type='text'][name='Worksheet-Name']{
    font-size: 35px;//instead of 36
    margin-top: 20px;
    margin-left: 15px;
}

or

.input-lg {
    height: 46px;
    padding: 10px 16px 0;//change here to have 0
    font-size: 18px;
    line-height: 1.33333;
    border-radius: 6px;
}

also possibly answered here with line-height: Why is Firefox cutting off the text in my <input type="text"/>?

这篇关于为什么Safari&amp; Firefox切断输入文本的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！