IE6.0输入框中文字垂直居中解决方案

最新推荐文章于 2018-12-03 15:53:25 发布

原创最新推荐文章于 2018-12-03 15:53:25 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #stylesheet #input #search #class #border

HTML CSS 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了在不同浏览器环境下实现中文输入框内容垂直居中的方法。通过设置特定的CSS样式，包括字体、边距及行高等属性，解决了IE等浏览器下中文显示偏移的问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content=""/> <meta name="description" content="" /> <link href="#" mce_href="#" type="text/css" rel="stylesheet" rev="stylesheet" media="screen" /> <title>输入框内中文字体垂直居中</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* {margin:0; padding:0;} .f{font-size:inherit;font-weight:inherit;font-family: "宋体";} body{font:normal normal 12px/1.5em "Tahoma";text-align:center;padding-top:20px;} .text { border:1px solid #789208;height:14px;vertical-align:middle;width:141px; vertical-align:middle;padding-left:3px;padding-top:2px;padding-bottom:2px;line-height:14px; } .btn{background:#A6CE2F;width:46px;height:18px;border:0;vertical-align:middle;text-align:center;font-family: "Tahoma"}</style> </head> <body> <p>浏览器默认情况IE偏上一点</p> <div><input type="text" ><input type="submit" value="search" /></div> <p>下面输入框纯中文偏上以点,使用英文字体情况:输入框内中文+英文就能垂直居中了</p> <div><input type="text" class="text" /> <input type="submit" class="btn" value="Search" /></div> <p>给输入框指定中文字体,输入中文也能垂直居中了</p> <div id="f" ><input type="text" class="text f" /> <input type="submit" class="btn" value="Search" /></div> </body> </html>