Html5输入框支持placeholder,但是在定义文本框中定义placeholder存在兼容问题

<input type="text" placeholder="search word" name="p" />  

但是在chrome下显示的search word并不能垂直居中。

在stackoverflow上找到了对应的方法。参考地址:http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding-problem

解决方法是:

把line-height设置为normal

CSS定义如下

input{
  line-height: normal; /* for non-ie */
  line-height: 22px\9; /* for ie */
}

input placeholder文字垂直居中(Mobile & PC)的更多相关文章

  1. input placeholder 文字颜色修改

    placeholder 文字颜色修改 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozill ...

  2. 设置input框文字垂直居中和宽度

    input { solid #999;height:22px; background:#ffffff; line-height:22px; margin:0px; padding:0px;/*表单输入 ...

  3. 如何让textarea placeholder 文字垂直居中

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  5. 小程序中点击input控件键盘弹出时placeholder文字上移

    最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...

  6. css常用技巧:input提示文字;placeholder字体修改

    1 很多网站都需要更改 <input>内部的placeholder 文字颜色属性:下面来介绍下这个技巧. 2  源代码: <!DOCTYPE html><html> ...

  7. placeholder文字颜色与是否显示兼容性

    1.ie显示问题 <script type="text/javascript"> $(document).ready(function(){ var doc=docum ...

  8. HTML 5 <input> placeholder 属性

    原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...

  9. 移动Web单行文字垂直居中的问题

    单行文字垂直居中的方式你可能可以脱口而出,height和line-height设置为同样就行了,或者设置相同的padding-top和padding-bottom值. 上图是Chrome浏览器下的效果 ...

随机推荐

  1. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  2. [RxJS] Transformation operator: repeat

    Operator repeat() is somewhat similar to retry(), but is not for handling operators. In this lesson ...

  3. optimizer hints

    In version MySQL 5.7.7 Oracle presented a new promising feature: optimizer hints. However it did not ...

  4. Java语言基础(四)

    Java语言基础(四) 一.基本数据类型(8) byte  8位  使用较少,一般用于网络传输: -128-+127 short  16位 不常用 -32768-+32767 int  32位 常用  ...

  5. EsayUI datagrid 刷新问题

    最近使用esayui 实现前台界面,在对父页面中datagrid列表项进行操作后,如果操作子页面是依附于父页面弹出的窗体,那么调用parent.$("#grid").datagri ...

  6. Android--WebView控件

    WebView 一 简介: WebView一般用于将Android页面已HTML的形式展现,我们一般叫它HTML5开发: WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用,通过 ...

  7. PHP代码批量加密

    <?php error_reporting(E_ALL); ini_set('display_errors','1'); //批量加密码当前目录 $dirnow = getcwd(); $dir ...

  8. DATEDIFF interval=ms的用法

    datediff(ms,@CurrDateTime,@Date)>0 当上面的日期超过24天,用上面的sql会有问题 要修改成如下: (CONVERT(VARCHAR,@CurrDateTime ...

  9. iOS开动画效果之──实现 pushViewController 默认动画效果

    在开发中,视图切换会常常遇到,有时我们不是基于导航控制器的切换,但实际开发中,有时需要做成push效果,下面将如何实现push和pop 默认动画效果代码实例: 一.push默认动画效果 CATrans ...

  10. winform(C#)拖拽实现获得文件路径

    设置Form的AllowDrop为true  private void Form1_DragDrop(object sender, DragEventArgs e)        {          ...