chrome中的文本字段光标问题

Question

我在表单部分使用了以下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中，价值在这个领域的顶部。我需要解决这个问题的方法。

请参阅my fiddle。 [铬不好]

Answer 1

从你的css类中删除line-height属性，我认为它会帮助你 更新小提琴：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;
}

Answer 2

最新答案（2014年10月）

玩完之后＆amp;观察什么＆＃34;参考＆＃34;项目正在进行中，我意识到一件事：我们做错了。

简而言之：对于一个坚实的＆amp;干净的跨浏览器解决方案一个不得使用 line-height属性使input type="text"元素更高，而是padding属性。

---

跨浏览器问题

正如问题中所指出的，浏览器以不同的方式解释line-height元素的input type="text"属性。

在这种情况下，对于Chrome，那么在2012年＆amp;即使现在仍然在2014年10月（版本37），它是光标位置。

请注意，相关的错误是在2010年6月提交的，https://code.google.com/p/chromium/issues/detail?id=47284，但后来因为过时而关闭（谁知道原因？）：但提供的实时错误复制http://jsbin.com/avefi/2仍然显示了chrome bug在撰写本文时（2014年10月 - 铬37）。

请注意，Valli69的答案还将line-height属性标识为问题的根源。但后来使用了一些相当hacky / dirty / risky IE8＆amp; IE9修复了（\0/和\9）。关于Ie8 CSS Hack - best method?

上这些技术的相关问题

---

如何不使用line-height或height属性？

这个解决方案很简单＆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上的现场演示（ps。使用此网址http://jsbin.com/fugegalibuha/1对IE8进行测试）

在 Windows操作系统上测试：IE8 +，IE11，Chrome 38和＆amp; 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。使用此网址http://jsbin.com/busobokapama/1对IE8进行测试）

在 Windows操作系统上测试：IE8 +，IE11，Chrome 38和＆amp; Firefox 32。

3）进一步解释

在查看Foundation之后，我想到了这个想法：它仅使用height和padding属性：line-height属性保留为默认值浏览器提供的值，即line-height: normal。

自己看：通过检查input type="text"元素on foundation's form component demo page http://foundation.zurb.com/docs/components/forms.html

唯一的事情就是＆＃34;只是＆＃34;使用height和padding似乎是IE8的一个问题所以我决定删除height属性。

---

结论

这个解决方案显然具有简单代码的巨大优势，而且＃34;正常工作＆＃34;在所有浏览器中。

但它的缺点是不让你完全控制 计算的总高度 ：计算出的高度属性（font-size + abitrary像素数）+ padding-top + padding-bottom +（border-width x 2）。 ＆＃34;计算出的高度属性＆＃34; seems to vary from browsers to browsers，因此＆＃34; abitrary像素数＆＃34; 命名。

由您决定最喜欢的内容：简单代码或像素精确设计。

---

资源

• 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

Answer 3

我找到了适用于最新版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

上的实时演示

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

基本上只是将行高和高度设置为与字体大小相同，然后使用填充调整输入以匹配预期的整体高度。

希望它可以帮助其他人遇到这个烦人的问题。

Answer 4

在jsFiddle中用line-height:30px;替换height:30px;只为我工作。

Answer 5

以下是将在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;