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. 【设计模式 - 15】之解释器模式(Interpreter)

    1      模式简介 解释器模式允许我们自定义一种语言,并定义一个这种语言的解释器,这个解释器用来解释语言中的句子.由于这种模式主要用于编译器的编写,因此在日常应用中不是很常用. 如果一种特定类型的 ...

  2. Struts2配置文件讲解

    解决在断网环境下,配置文件无提示的问题我们可以看到Struts.xml在断网的情况下,前面有一个叹号,这时,我们按alt+/ 没有提示,这是因为” http://struts.apache.org/d ...

  3. BFS-hdu-4101-Ali and Baba

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4101 题目大意: 给一个矩阵,0表示空的可走,-1宝藏的位置(只有一个),其余的正整数表示该位置石头 ...

  4. centos6.5 安装

    导系统,进入rescue模式,在提示符下输入grub,进入grub提示符.(不管用什么方法,能进入grub就行)root(hd?,?) //前一个问号是你第几块硬盘,后一个是LINUX所在的第几个分区 ...

  5. Java实现文件拷贝的4种方法.

    原文地址:http://blog.csdn.net/ta8210/article/details/2073817 使用 java 进行文件拷贝 相信很多人都会用,,不过效率上是否最好呢? 最近看了看N ...

  6. 在Eclipse中显示空格(space)和制表符(tab)

    显示空格(space)和制表符(tab)设置: Window->Preferences->General->Editors->Text Editors->Show whi ...

  7. javascript 高级程序设计(二)-在html中使用javascript

    <script> async 可选 charset 可选 defer 可选 language 已废弃 src 可选 type 可选

  8. PHP利用超级全局变量$_POST来接收表单数据。

    利用$_POST超级全局变量接收表单的数据,然后利用echo输出到页面. 下面是代码: <!doctype html> <html> <head> <titl ...

  9. <thead>

    <thead> 标签定义表格表头该标签用于组合 HTML 表格表头内容 thead 元素应该与 tbody 和 tfoot 元素结合起来使用 tbody 元素用于对 HTML 表格主体内容 ...

  10. @ManyToMany中间表附加字段设计

    在使用@ManyToMany时,若中间表只有相应的外键字段可以直接建立两个对应的Entity 设置ManyToMany @ManyToMany 两个表多对多关联 但若是中间表有自己的附加字段,这需要为 ...