input框的placeholder使用line-height在Safari上不垂直居中的问题
来源:互联网 发布:java输出2到200的素数 编辑:程序博客网 时间:2024/06/06 01:26
测试中出现的问题,Safari5.1.7 input文本框有placeholder值时,css样式设置 line-heigh t与 heigh t等高,并不能使提示文本垂直居中,如下:
解决方案一:使用padding使提示文字居中,如果font-size:14px,UI高度为40px,我们可以设height:14px,padding:13px 0;如下:
解决方案二:使用line-height:1px
height: 40px; line-height: 40px;
解决方案一:使用padding使提示文字居中,如果font-size:14px,UI高度为40px,我们可以设height:14px,padding:13px 0;如下:
height: 16px; padding: 12px 0;
解决方案二:使用line-height:1px
height: 40px; line-height: 1px;
解决方案三:使用vertical-align: middle;
height: 40px; vertical-align: middle;
对于单行文本,使用line-height=height不垂直居中的问题只出现于input框上面,对于其他元素是垂直居中的,效果如下图:
0 0
- input框的placeholder使用line-height在Safari上不垂直居中的问题
- input框的placeholder使用line-height在Safari上不垂直居中的问题
- 移动端android上line-height不居中的问题
- 解决input设置line-height不居中的兼容性问题
- UITextField文字垂直居中和placeholder偏上的问题
- 设置文字在div中垂直居中,使用line-height
- chrome下input[type=text]的placeholder不垂直居中的问题解决 调试通过
- vertical-align的垂直居中 上标下标 及line-height
- IE9不支持CSS line-height的文字垂直居中解决方法
- line-height 行高的垂直居中性
- Android中line-height不居中的解决办法
- input输入框不为text时placeholder的文本在手机上不显示的解决方案
- IE7,IE8,IE9 字体不能垂直居中, line-height 不起作用的解决方法
- CSS行高——line-height 文本的垂直居中(display:block;情况下)
- [ CSS ] line-height 与垂直居中!
- line-height多行文本垂直居中
- input line-height造成的兼容问题
- placeholder垂直居中(解决光标居中、文字不居中问题)
- tjut 2509
- nagios系列(八)之nagios通过nsclient监控windows主机
- Go语言之基本数据类型以及一些规范
- Android中Scrollview嵌套recyclerView,recyclerview设置wrapcontent无法显示以及显示后item显示不全的问题
- js 控制台输出
- input框的placeholder使用line-height在Safari上不垂直居中的问题
- 【杭电】[1312]Red and Black
- 机器学习面试问题5
- 纯js css3 实现loading demo
- 命令模式
- Maven工程自动化构建方法
- day2:gnuradio 实现fm发射机
- 浅析Java虚拟机结构与机制
- 牛客网在线编程题规范实例