我想要的是
Chrome 合金
在Chrome上，输入文本看起来很正常。
怎么了
火狐浏览器
苹果浏览器
如您所见，在Firefox的底部，输入文本被略微截断，而在Safari上，输入文本被截断了。我该如何解决？
如果有人可以帮助w/这将不胜感激!
代码
的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
最佳答案
您可以减少底部填充和/或字体大小，这将解决您的溢出问题。
input[type='text'][name='Worksheet-Name']{
font-size: 35px;//instead of 36
margin-top: 20px;
margin-left: 15px;
}
或者
.input-lg {
height: 46px;
padding: 10px 16px 0;//change here to have 0
font-size: 18px;
line-height: 1.33333;
border-radius: 6px;
}
也可能在这里用line-height回答:
Why is Firefox cutting off the text in my <input type="text"/>?