我在我的表单部分使用以下 css。
CSS
.username input{
background-color: #FFFFFF;
border: 2px solid #DDDDDD;
border-radius: 5px 5px 5px 5px;
color: #9E9E9E;
height: 30px;
width: 330px;
padding:0px 10px 0px 0px;
padding-left:10px;
margin:15px 0px 0px 0px;
line-height:30px;
}
它在所有浏览器中都能正常工作。但是在 Chrome 中，光标显示在输入标签的相同高度。我找到了解决方案，如果我删除line-height它会按我的意愿显示。但在 IE 中，这些值位于该字段的顶部。我需要这个问题的解决方案。
请看我的小提琴。[镀铬不好]
line-height从您的 css 类中删除属性，我认为它会帮助您
更新小提琴：http: //jsfiddle.net/4Etyn/16/
<div class="username">
<input name="txtFullName" id="txtFullName" type="text" class="user" value="Username" onBlur="if(this.value=='') this.value='Username'" onFocus="if(this.value =='Username' ) this.value=''" />
</div>
.username input{
background-color: #FFFFFF;
border: 2px solid #DDDDDD;
border-radius:5px;
color: #9E9E9E;
height: 30px;
height: 22px\0/;
width: 330px;
padding:0px 10px 0px 10px;
padding:8px 10px 0px 10px\0/;
margin:15px 0px 0px 0px;
vertical-align:middle;
}
:root .username input{
height: 30px\9;
padding:0px 10px 0px 10px\9;
}
在玩弄并观察“参考”项目在做什么之后，我意识到一件事：我们做错了。
简而言之：对于一个可靠且干净的跨浏览器解决方案，不能使用 line-height属性来使input type="text"元素更高，而是使用padding属性。
正如问题中所指出的，浏览器以不同line-height的方式解释元素的属性。input type="text"
在这种情况下，对于 2012 年的 Chrome，甚至现在 2014 年 10 月（版本 37），它是针对光标位置的。
请注意，2010 年 6 月提交了一个相关错误，https://code.google.com/p/chromium/issues/detail?id=47284，但随后作为过时而关闭（谁知道为什么？）：但提供的实时错误复制，http://jsbin.com/avefi/2，在编写时仍显示 chrome 错误（2014 年 10 月 - chrome 37）。
请注意，Valli69的答案还将line-height属性确定为问题的根源。但随后使用了一些相当 hacky/dirty/risky 的 IE8 和 IE9 修复（使用\0/和\9）。关于Ie8 CSS Hack 上的这些技术的相关问题 - 最佳方法？
line-height也不height财产呢？这个解决方案很简单，甚至现代和旧的浏览器都支持！
1) 简化示例中的解决方案
/*
* [1] overrides whatever value "line-height" property was given by any other selector
* note: make it "line-height: normal !important;" if necessary
* [2] overrides whatever value "height" property was given by any other selector
* note: make it "height: auto !important;" if necessary
*/
.username {
line-height: normal; /* [1] */
height: auto; /* [2] */
padding-top: 10px;
padding-bottom: 10px;
}
<input class="username" type="text" placeholder="Username" />
http://jsbin.com/yadebenoniro/1/edit?html,css,output上的现场演示（ps. 使用此 url http://jsbin.com/fugegalibuha/1在 IE8 上进行测试）
在Windows 操作系统上测试：IE8+、IE11、Chrome 38 和 Firefox 32。
2）问题背景下的解决方案
/*
* [1] overrides whatever value line-height property was given by any other selector
* note: make it "line-height: normal !important;" if necessary
* [2] overrides whatever value "height" property was given by any other selector
* note: make it "height: auto !important;" if necessary
*
* [3] use the padding-top, padding-bottom to adjust the height of your input type text
* [4] keep in mind that when changing the font-size value you will have to adjust the padding top and padding bottom if you want to keep the same height as previously
*/
.username input {
background-color: #FFFFFF;
border: 2px solid #DDDDDD;
border-radius: 5px;
color: #9E9E9E;
height: auto; /* [2] */
line-height: normal; /* [1] */
margin: 15px 0px 0px 0px;
padding: 10px 5px 10px 5px; /* [3] */
width: 330px;
font-size: 20px; /* [4] */
}
http://jsbin.com/busobokapama/1/edit?html,css,output上的现场演示（ps. 使用此 url http://jsbin.com/busobokapama/1在 IE8 上测试）
在Windows 操作系统上测试：IE8+、IE11、Chrome 38 和 Firefox 32。
3) 进一步说明
这个想法是在查看Foundation后想到的：它仅使用heightandpadding属性：该line-height属性保留为其默认的浏览器提供的值，即line-height: normal.
自己看：通过检查基础的表单组件演示页面上input type="text"的元素http://foundation.zurb.com/docs/components/forms.html
唯一的问题是，即使“只是”使用height，padding对于 IE8 来说似乎也是一个问题，所以我决定甚至删除该height属性。
该解决方案显然具有简单代码的巨大优势，可以在所有浏览器中“正常工作”。
但它也有一个缺点，即不能让您完全控制计算的总高度：计算的高度属性（字体大小 + 任意像素数）+ padding-top + padding-bottom + (border-width x 2)。“计算高度属性”似乎因浏览器而异，因此命名为“任意像素数”。
由您决定您最喜欢什么：简单的代码或像素精确的设计。
我找到了一个适用于最新版本的 Chrome 和 Firefox，以及 IE 8 和 9 的解决方案。我没有测试任何其他浏览器，因为我不需要支持低于 IE 8 的任何东西。
<input class="issue" type="text" />
<input class="solution" type="text" />
.issue {
font-size: 14px;
height: 44px;
line-height: 44px;
padding: 0 10px;
vertical-align: top;
}
.solution {
font-size: 14px;
line-height: 14px;
height: 14px;
padding: 15px 10px;
}
在http://jsbin.com/usimeq/1上查看现场演示
编辑：忘记添加第一个输入显示问题，第二个显示解决方案。
基本上只需将行高和高度设置为与字体大小相同，然后使用填充调整输入以匹配预期的整体高度。
希望它可以帮助其他遇到这个烦人问题的人。
只需在您的 jsFiddle 中替换为我即可line-height:30px;。height:30px;
这是将在 IE8 中对齐并且不会在 Chrome 中显示巨大光标的输入的示例 css。
line-height: 14px/*to enclose 13px font, override this if needed*/;
height: 14px/*to enclose 13px font, override this if needed*/;
/*Padding is needed to avoid giant cursor in webkit, which we get if
height = line-height = 22px.*/
padding: 6px 8px;