在项目中遇到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. Mac下ssh连接远程服务器时自动断开问题

    在mac下使用securecrt通过ssh连接远程服务器时,总会一段时间没有动作后,ssh被自动断开.在windows下用xmanager貌似没有遇到过这个问题. 在网上找了解决方法如下: 客户端配置 ...

  2. js 各进制前缀 及 转换

    二进制前缀0b var a=0b11;//a=3 八进制前缀0 var a=011;//a=9 十进制不用前缀 十六进制前缀0x var a=0x11;//a=17 数字转各进制字符串用num.toS ...

  3. WeMall的Android app商城中的wemall doraemon代码

    WeMall-Android 包含SMSSDK/WeMall-Client/social_sdk_library_project三个项目以及Api目录下的client.php/update.xml接口 ...

  4. 1639: [Usaco2007 Mar]Monthly Expense 月度开支

    1639: [Usaco2007 Mar]Monthly Expense 月度开支 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 593  Solved: ...

  5. kali linux 折腾笔记

    http://xiao106347.blog.163.com/blog/static/215992078201342410347137/ 这里告诉你刚刚装好kali后要做,有些也是不正确的,可能开始你 ...

  6. C++—引用的作用

    引入 C语言中函数有两种传参的方式: 传值和传址.以传值方式, 在函数调用过程中会生成一份临时变量用形参代替, 最终把实参的值传递给新分配的临时变量即形参. 它的优点是避免了函数调用的副作用, 确无法 ...

  7. Django HTTP处理流程（自我总结）

    Django中由wsgi模块接管http请求,核心处理方法为get_wsgi_application,其定义如下: def get_wsgi_application(): ""&q ...

  8. select count(*)优化 快速得到总记录数

    1.select count(*) from table_name 比select count(主键列) from table_name和select count(1) from table_name ...

  9. KeychainItemWrapper的使用

    KeychinaItemWrapper官方Demo下载地址KeychinaItemWrapper. NSString *identifier = @"xxxxxx";//你要使用的 ...

  10. [敏捷开发实践]（2） 用于开发和维持复杂产品的敏捷开发框架Scrum

    [敏捷开发实践](2) 用于开发和维持复杂产品的敏捷开发框架Scrum 1,Scrum概述 上篇中提到敏捷开发有两种主流的方法,一个是XP,另一个是Scrum,本篇简要介绍Scrum方法.Scrum是 ...