Remove line-height attribute from your css class, I think it will help you
updated fiddle: 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/; 
    width: 330px; 
    padding:0px 10px 0px 10px; 
    padding:8px 10px 0px 10px/;  
    margin:15px 0px 0px 0px;
    vertical-align:middle;
}
:root .username input{
    height: 30px9;
    padding:0px 10px 0px 10px9;
}

Up-to-date answer (October 2014)

在围绕 & amp; 玩游戏之后, 观察“ 参考” 项目正在做什么, 我意识到一件事: 我们做错了 。

简言之: 对于固态 & amp; 干净的交叉浏览解答, 一种 < number > 不能使用 < strong > < code > line- leight 属性使 < code > intoput type= " text" 元素更高, 而不是 < code > padding 属性 。

Cross browser issues

如问题所示,浏览器以不同方式解释 line-leight 属性对 input type="text" 元素的line-leight 属性。

在这种情况下,对于当时的2012年的铬( amp); 即使现在在2014年10月( 第37版), 也是为了光标的位置 。

请注意2010年6月有相关的错误提交, < a href="https://code.google.com/p/chromium/issues/detail?id=47284" rel="no follown noreferrer" >https://code.google.com/p/chromium/issues/detail?id=47284 ,但随后关闭为过时(谁知道原因?) :但提供的实时错误复制, < a href="http://jsbin.com/avefi/2" rel="nofolvenoreferr", 仍然显示正在写入时的铬虫(2014年10月 - Chrome 37)。

请注意,Valli69 s 答复也确认 line-leight 属性是问题的根源。但随后又使用了某种相当黑的/dirty/risky IE8 & amp; IE9 修正(有/ 和 9 )。在 < a href="上关于这些技术的相关问题:https://stackoverflow.com/ questions/5635829/ie8-css-hack-best-method>Ie8 CSS Hack -最佳方法?

What about NOT using line-height nor height property ?

此解决方案是简单的 & amp;, 甚至得到现代和旧浏览器的支持!

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" rel=“不随从无参考者?com/yadebenoniro/1/edit?html,cs,output (使用此URl < a href='"http://jsbin.com/fugegalibuha/ 1, rel=“不随从 noreferr'>>http://jsbin.com/fugegalibuha/1)

测试“强度”窗口OS

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" rel=“nofollown noreferrer”>http://jsbin.com/busobokapama/1/edit?html,cs,output (使用这个urlhttp://jsbin.com/busobokapama/1)

测试“强度”窗口OS

3) 进一步解释

在查看 < a href=> http://foundation.zurb.com/" rel="nofollow noreferrer" > Foundation :它只使用 hile 和 pading 属性: line-height 属性留给默认的 brower提供 值,即 line-hright: normal 。

自己看:通过检查 input type="text" 元素 基础部分构成演示网页http://foundation.zurb.com/docs/upposics/forms.html

唯一的问题是,即使使用 hile 和 pading 的“ just” 和 pading 似乎对 IE8 来说是一个问题,所以我决定甚至删除 hile 属性。

Conclusion

这个解决方案显然有一个巨大的优势 一个简单的代码, 在所有浏览器中“只管工作”。

但它也有不让你完全控制 < engene_ em> 计算总高度 < / em_ / / enger > 的缺点: 计算高度属性( 硬尺寸+像素的比特数) + 斜面- 顶部+ 斜面- 底部+ (边界- 宽度 x 2) 。 “ 计算高度属性” < a href=" https:// stackoverlow.com/ questions/2642685/ html- is- insput- box- default- calcate- content- hight- differate- acrosy- browsers] > > 的外观, 从浏览器到浏览器 < / a >, 因此, < em > > 等像的比特拉数 < 。 < em > 命名。

由你来决定你最喜欢什么: 简单的代码或像素精密设计。

Resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• HTML: is input box default/calculated content height different across browsers

我找到一个解决方案,在最新版本的 " 铬与火狐 " 和 " 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, rel=“nofollow”>http://jsbin.com/usimeq/1

编辑: 忘记添加第一个输入显示问题, 第二个显示解决方案 。

基本上只要将行高度和行高度设置为字体大小相同,然后使用后方划线调整输入,以符合预期的总高度。

希望它能帮助任何人 遇到这个烦人的问题

刚刚将 line-hale30px; 替换为 hille30/30px; 。 在您的jsFiddle 中, 为我工作。

这里为输入的 cs 样本, 这些输入将在 IE8 中对齐, 并将在 染色体中显示巨型光标 。

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;