现在的位置: 首页 > 综合 > 正文

input背景图随文本左移问题

2012年08月12日 ⁄ 综合 ⁄ 共 1315字 ⁄ 字号 评论关闭

问题是这样的:
给input设置背景时
如果不加fixed,即固定背景
那么在IE下
当输入文本超过文本框时
背景会同时向左移动
此问题在firefox下是不存在的。
如下:

程序代码
<input type="text" style="background: #fff url(http://www.jasminemm.cn/img/icon_search.jpg) no-repeat 2px 2px;border:1px solid #d4d4d4; padding-left:15px;"/>

 

方法一:给input加上 maxlength 属性。

程序代码
<input type="text" style="background: #fff url(http://www.jasminemm.cn/img/icon_search.jpg) no-repeat 2px 2px;border:1px solid #d4d4d4; padding-left:15px;" maxlength="20" />

但是我觉得这不是最佳的方法,当用户需要输入的字数比限度的20多的时候,就无法输入了,如果设置maxlength对应宽度比input大,那么输入的时候,背景图同样会左移!如:

程序代码
<input type="text" style="background: #fff url(http://www.jasminemm.cn/img/icon_search.jpg) no-repeat 2px 2px;border:1px solid #d4d4d4; padding-left:15px;" maxlength="200"/ >

方法二:用background-attachment:fixed;属性。
但是,ff 和 IE7 不支持fixed属性,加上的话,背景图片就显示不出来了。如下:

程序代码
<input type="text" style="background: #fff url(http://www.jasminemm.cn/img/icon_search.jpg) no-repeat 2px 2px;background-attachment:fixed; border:1px solid #d4d4d4; padding-left:15px;" />

所以只能用HACK方法,首先对IE6:

程序代码
<input type="text" style="background: #fff url(http://www.jasminemm.cn/img/icon_search.jpg) no-repeat 2px 2px;_background-attachment:fixed; border:1px solid #d4d4d4; padding-left:15px;" />

但是IE7下,问题还是没解决!!

方法三:为了应付,目前只能用div来模拟

程序代码
<div style="background:#fff url(images/icon_search.jpg) no-repeat 2px 2px; border:1px solid #d4d4d4; width:150px; padding-left:20px;">
     <input name="" type="

抱歉!评论已关闭.