问题是这样的:
给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="