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. 【Android - 框架】之Fresco的使用

    当下有很多图片加载框架,常见的有Glide.Fresco.Picasso等.Glide因为其体积小.缓存机制强大等优点,受到了广大程序员的青睐:Fresco虽然体积比较大,缓存机制也没有Glide强大 ...

  2. OMCS的语音视频带宽占用

    OMCS的语音.视频.电子白板.远程桌面等功能对网络带宽的要求分别如何了? 我们先假设一种常见的场景:假设N个在线用户同时进行1对1的多媒体沟通(即分为N/2组),在不考虑P2P通道的情况下,带宽的大 ...

  3. Unity UGUI——Rect Transform组件(基础属性)

    基础属性:Width.Height.Pivot图示 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXJfQUhhbw==/font/5a6L5L2T/fo ...

  4. Android传感器概述(六)

    监视传感器事件 要监视原始的传感器数据,你须要实现两个通过SensorEventListener接口暴露的回调方法:onAccuracyChanged()和onSensorChanged().Andr ...

  5. MyEclipse_6.0.1GA_E3.3.1集成版下载地址

    因在开发中经常使用到myeclipse 对比相关版本,还是觉得6.0 –6.5 比较适合开发,其他的开发起来比较卡,下面是下载地址 MyEclipse_6.0.1GA_E3.3.1集成版下载地址:   ...

  6. ios中从相册:相机中获取图片信息

    ios中从相册/相机中获取图片信息 从相册中获取图片的信息 UIImagePickerController *imgPickView = [[UIImagePickerController alloc ...

  7. [转] What is the point of redux when using react?

    As I am sure you have heard a bunch of times, by now, React is the V in MVC. I think you can think o ...

  8. Java基础知识强化08:将字符串倒序输出(包括空格)的几种方法

    1.最容易想到的估计就是利用String类的toCharArray(),再倒序输出数组的方法了: package himi.hebao05; public class TestDemo02 { pub ...

  9. Driving the Activity Lifecycle

    Before Robolectric 2.2, most tests created Activities by calling constructors directly, (new MyActiv ...

  10. 自己写的demo。List<HashMap<String,Object>>=new ArrayList<HashMap<String,Object>>

    package com.pb.collection; import java.util.ArrayList; import java.util.HashMap; import java.util.It ...