chrome下input[type=text]的placeholder不垂直居中的问题解决

本文探讨了在Chrome浏览器中HTML5占位符样式无法垂直居中的问题,并提供了在StackOverflow找到的解决方案。通过将line-height属性设置为'normal'或特定值,可以解决此问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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

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

so fix it...

<!DOCTYPE html> <html> <head> <title>{title}</title> <meta http-equiv="Content-Type" content="text/html; charset={charset}" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" type="text/css" href="{static_server}/static/templates/2016_01/index.css?20160506"/> <link rel="shortcut icon" href="{static_server}/static/images/tongda.ico" /> {javascript} </head> <body onload="javascript:document.form1.{focus_filed}.focus();" scroll="auto"> {update_tips} <img src="/static/templates/2016_01/tdxk.png" class="tdxk" /> <form class="login_form" name="form1" method="post" action="logincheck.php" {autocomplete} onsubmit="{form_submit}"> <div id="center" class="center"> <img src="/static/templates/2016_01/logo.png" class="logo"> <div class="input-wrap name"> <label for="name">用户名:</label> <input type="text" id="name" name="UNAME" maxlength="20" onmouseover="this.focus()" onfocus="this.select()" value="{username_cookie}" placeholder="请输入用户名"/> </div> <div class="input-wrap password"> <label for="password">密 码:</label> <input type="password" id="password" name="PASSWORD" maxlength="200" onmouseover="this.focus()" onfocus="this.select()" value="" placeholder="请输入密码"/> </div> <!-- <div > --> <input type="hidden" name="encode_type" value="1"> <button type="submit" id="submit" class="login_btn" title="登录">登录</button> <!-- </div> --> <!--<div class="logo"><img src="{static_server}/static/templates/2015_02/logo.png" /></div>--> <!--<div class="clear"></div>--> </div> <div style="margin-top: 30px;text-align:center;font-size: 30px;line-height: 40px;color:red;"><strong>非密信息系统,禁止存储,处理和传输涉密信息!</strong></div> <div class="msg" style="width: 350px;margin: 0 auto;"> <div>{tips}</div> <div>{usb_key_option}</div> <div>{miibeian}</div> <div>{antivirus_script}</div> </div> <!--设置公司特色注释 <div align="center" class="msg"> <div><span style='color:red;margin-right:10px;'>xxxxxx</span><a href='http://www.tongda2000.com/' target='_black'>通达官网</a></div> </div> 设置公司特色注释 结束--> <div style="width: 350px;margin: 0 auto;">{usbkey_object}</div> </form> </body> </html> 帮我分析一下
最新发布
07-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值