在项目中遇到input的placeholder在safari下设置行高失效的问题，问度娘后未得治原因，倒是有解决办法：
方法一：使用padding使提示文字居中，如果font-size:14px,UI高度为40px,我们可以设height：14px,padding:13px 0;
方法二：使用line-height:1px
方法三：使用vertical-align: middle;
实践后问题得以解决，但是其他浏览器下也受到了影响，那么问题来了，我们需要单独针对Safari来写hack即[;line-height:1;]
至此，问题完美解决

css系列：input的placeholder在safari下设置行高失效的更多相关文章

  1. css设置input中placeholder字体

    设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...

  2. 如何用css给input的placeholder设置颜色

    我在做页面的时候遇到过这种情况,在input标签中有默认字,但是设计稿上的颜色和input标签中的placeholder的默认颜色不一致.虽然我们可以在js中写出,但是有点过于麻烦了. 所以我就用cs ...

  3. css 修改input中placeholder提示问题颜色

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(74, 87, 103, 1); ...

  4. css改变input输入框placeholder值颜色

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Fi ...

  5. 在safari下input的placeholder设置行高失效

    在项目中遇到input的placeholder在safari下设置行高失效的问题,亲测 input{ width:250px; height:30px; line-height:30px; font- ...

  6. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  7. css系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...

  8. ie8的input的placeholder不显示的解决bug

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. 解决input 中placeholder的那些神坑

    **昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...

随机推荐

  1. C#的数据类型、数据类型的转化

    一.c#有15个预定义类型,其中13个是值类型,两个是引用类型(string 和 object)这里主要说明整型.浮点型.布尔型以及引用型 1.整型数据 2.浮点型 浮点型从精度有低到高有float. ...

  2. MySQL之乱码问题解决详解

    今天在写一个项目的时候,在数据库中手动插入数据不会产生中文乱码,但是通过javaWeb却出现乱码,把提交表单和响应中的乱码问题解决后,还是乱码.所以我锁定一定是我的mysql数据库中出现了乱码的现象.

  3. React组件开发经典案例--todolist

    点开查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  4. Android ORMLite 框架的入门用法

    大家在Android项目中或多或少的都会使用数据库,为了提高我们的开发效率,当然少不了数据库ORM框架了,尤其是某些数据库操作特别频繁的app:本篇博客将详细介绍ORMLite的简易用法. 下面开始介 ...

  5. resin远程调试配置，connection refused问题解决

    http://john521.iteye.com/blog/1879805 这篇博客中讲的很好. 我在配置的过程中遇到了几个问题,记录一下: 1. 调试服务器监听的端口号,百度的开发机都限制了端口在某 ...

  6. Struts2之标签使用

    上一篇我们一起探讨了Struts2中的OGNL表达式的知识,本篇我们一起来学习一下关于Struts2标签的使用,包括:基础标签:property.set.bean.include:判断标签:if el ...

  7. cuda事件的使用

    cudaEvent_t start,stop; cudaEventCreate(&start);//创建事件 cudaEventCreate(&stop); cudaEventReco ...

  8. js移动端横竖屏检测

    方法一:用resize事件来判断,利用屏幕的宽高比,来判断横竖屏 (兼容性较好) (function () { var updateOrientation = function () { var or ...

  9. SEQ序号与ACK序号理解总结

    备查 SEQ序号与ACK序号理解总结

  10. Javascript 闭包访问问题？

    function pfajax(paradata){ $.ajax({ data : paradata.dat, type : paradata.method, async: false, url : ...