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中,价值在这个领域的顶部.我需要解决这个问题的方法.

请看我的小提琴.[铬不好]

Answer 1

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;
}

Answer 2

最新答案(2014年10月)

在玩完并观察"参考"项目正在做什么之后,我意识到一件事:我们做错了.

简而言之:对于一个稳定和干净的跨浏览器解决方案,不能使用 line-height property来使input type="text"元素更高,而是padding属性.

跨浏览器问题

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

在这种情况下,对于Chrome,然后在2012年,甚至现在仍然在2014年10月(版本37),它用于光标位置.

请注意,相关的错误已于2010年6月提交,https://code.google.com/p/chromium/issues/detail？id = 47284,但随后关闭时已过时(谁知道原因？):但提供的实时错误复制,http://jsbin.com/avefi/2,仍然显示写入时的铬错误(2014年10月 - 铬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之后,我想到了这个想法:它只使用了height和padding属性:line-height属性保留为默认的brower提供的值,即line-height: normal.

自己看看:通过检查基础表单组件演示页面上的input type="text"元素http://foundation.zurb.com/docs/components/forms.html

唯一的事情就是即使"只是"使用height并且padding似乎是IE8的问题所以我决定甚至删除该height属性.

结论

这个解决方案显然具有简单代码的巨大优势,可以在所有浏览器中"正常工作".

但它也有一个缺点,就是不让你完全控制计算出的总高度:计算出的高度属性(font-size + abitrary像素数)+ padding-top + padding-bottom +(border-width x 2)."计算高度属性" 似乎因浏览器而异,因此命名为"abitrary像素数".

由您来决定您最喜欢什么:简单的代码或像素精确的设计.

资源

• https://developer.mozilla.org/en-US/docs/Web/CSS/height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• HTML:输入框默认/计算的内容高度因浏览器而异