问题描述
我的测试代码如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> </head> <body><input style="width:1px" size="1" name="file" type="file"> </body> </html> 发现当去掉size="1"后，在Firefox下width:1px无效，小弟想实现“浏览”覆盖文本框的效果， 即只显示“浏览”按钮，不显示文本框。以上代码在IE下基本符合我的需求， 但在Firefox下总有宽约10px的文本框显示出来，请各位指点下，非常感谢！！！ (Firefox测试版本：3.6.11)
解决方案
下面是一个使用图片来覆盖的方法，应为这里没有上传附件的功能，图片我上传到javaeye里了，你下载后修改一下路劲。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title> New Document </title><style type="text/css">.pic-manager .upload a{background: url(http://dl.iteye.com/upload/attachment/338199/66489912-e766-303f-899f-164b1a918b45-thumb.png) no-repeat;}.pic-manager {padding-left: 0px;}.pic-manager .upload a{width: 90px; height: 20px; cursor: pointer; overflow: hidden; background-position: -32px -40px; display: block;}.pic-manager .upload a:hover {background-position: -32px -60px;}.pic-manager .upload input {cursor: pointer; opacity: 0; filter: alpha(opacity = 0); width: 80px; height: 20px;}</style></head><body><div class="pic-manager"><span class="upload"><a href="javascript:void(0);"><input type="file" name="fileUpdate"/></a></div></body></html>###ff和IE有像素差的，像这么小的像素在ff中会忽略的，你可以尝试其他的方法去实现你想要的效果，不要在一棵树上吊着嘛###如果设置不了可以使用以下方式吧file控件设置为全透明，然后把它绝对定位到一个button 上面