这个问题一直让我整个上午疯狂.我一直在尝试使用自定义背景获取输入字段以在IE中正确对齐.我读了其他问题,说行高将修复它,但这没有奏效.
它在chorme / safari / etc中看起来很好,但在IE8中,文本粘在输入区域的顶部. (Stack不会让我发布图片).我的CSS是:
#email { background: url('BACKGROUND IMAGE') left top no-repeat; background-size: 273px 38px; width: 273px; height: 38px; line-height: 38px; border: 0; margin: 0 0 5px; font: bold 12px arial,helvetica,sans-serif; color: #777; padding:0 8px; outline: none; float:left; }
和HTML:
<input id="email" type="text" name="email" size="14" value="your email address" onfocus="if(this.value=='your email address') {this.style.color='#333'; this.value='';}" onblur="if(this.value== '') {this.style.color='#808080'; this.value='your email address';}" />
关于如何让我的输入文本在IE 8及更低版本中垂直居中的任何想法?
解决方法
这应该很容易修复. line-height属性很重要,但是当你使用速记字体属性时,它似乎在IE8中丢失了.尝试将行高添加到速记字体属性,并删除单独声明的行高.
#email { background: url('BACKGROUND IMAGE') left top no-repeat; background-size: 273px 38px; width: 273px; height: 38px; border: 0; margin: 0 0 5px; font: bold 12px/38px arial,sans-serif; color: #777; padding:0 8px; outline: none; float:left; border:1px solid #999; }
这里有一个jsFiddle example(边框添加只是为了显示它是如何对齐的).
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。