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. ng-repeat 遍历同值数组导致的报错

    http://blog.csdn.net/tyust512/article/details/50370624

  2. memcache基本讲解

    Memcached技术 介绍: memcached是一种缓存技术, 他可以把你的数据放入内存,从而通过内存访问提速,因为内存最快的, memcached技术的主要目的提速, 在memachec 中维护 ...

  3. oracle AWR深入研究分析,如何使用

    AWR的前身是statspack,当然现在还在,只不过大家都在使用AWR,因为它方便,简单,直观,形象. AWR是oracle内置工具,安装oracle时已经自动安装完毕,无需额外安装了. SELEC ...

  4. android 05 桢布局:FrameLayout 网格布据 GridLayout

    xml文件: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android: ...

  5. Qt 学习之路 :动态视图

    Repeater适用于少量的静态数据集.但是在实际应用中,数据模型往往是非常复杂的,并且数量巨大.这种情况下,Repeater并不十分适合.于是,QtQuick 提供了两个专门的视图元素:ListVi ...

  6. cordova 消息推送,告别,消息推送服务器,和 苹果推送证书

    cordova plugin add org.apache.cordova.vibration cordova plugin add https://github.com/katzer/cordova ...

  7. CakePHP之请求与响应对象

    请求与响应对象 请求与响应对象在 CakePHP 2.0 是新增加的.在之前的版本中,这两个对象是由数组表示的,而相关的方法是分散在RequestHandlerComponent,Router,Dis ...

  8. Iterator<Entry<String,String>> iter=map.entrySet().iterator(); 是什么意思

    //获得map的迭代器,用作遍历map中的每一个键值对Iterator是迭代器,map之前应该定义过,姑且认为是HashMap.<Entry<String,String>>表示 ...

  9. producer怎样发送消息到指定的partitions

    http://www.aboutyun.com/thread-9906-1-1.html http://my.oschina.net/u/591402/blog/152837 https://gith ...

  10. 枚举,Enum,常规使用demo记录

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mv ...