场景描述：
为了在各浏览器上传控件保持统一的风格，用隐藏“浏览控件”的方式，在最新版本的Firefox下隐藏的“浏览”按钮漂移了。
问题分析：
HTML代码：
<form class="form-upload" action="/jcfile/upload?" id="fupload" target="uploadds" enctype="multipart/form-data" method="post" autocomplete="off"> <input type="text" name="filePath" class="text" id="filePath" readonly=""> <input type="file" name="file" id="file" width="50px" onchange="return window.document.getElementsByName(‘filePath‘)[0].value=this.value" accept="text/plain"> <a href="javascript:void(0);" class="tbtn3">浏览</a> <a href="javascript:void(0);" class="tbtn6 upfile">上传</a> <a href="javascript:void(0)" class="lnk resultClear">清空</a> </form>
在Firefox下的HTML解析代码：
<form autocomplete="off" method="post" enctype="multipart/form-data" target="uploadds" id="fupload" action="/jcfile/upload?" class="form-upload"> <input type="text" readonly="" id="filePath" class="text" name="filePath"> <input width="50px" type="file" accept="text/plain" onchange="return window.document.getElementsByName(‘filePath‘)[0].value=this.value" id="file" name="file" style="left: -12px;"> <a class="tbtn3" href="javascript:void(0);">浏览</a> <a class="tbtn6 upfile" href="javascript:void(0);">上传</a> <a class="lnk resultClear" href="javascript:void(0)">清空</a> </form>
不难发现在file控件上多了个内联样式style="left:-12px;"
在Chrome下的HTML解析代码：
<form class="form-upload" action="/jcfile/upload?" id="fupload" target="uploadds" enctype="multipart/form-data" method="post" autocomplete="off"> <input type="text" name="filePath" class="text" id="filePath" readonly=""> <input type="file" name="file" id="file" width="50px" onchange="return window.document.getElementsByName(‘filePath‘)[0].value=this.value" accept="text/plain"> <a href="javascript:void(0);" class="tbtn3">浏览</a> <a href="javascript:void(0);" class="tbtn6 upfile">上传</a> <a href="javascript:void(0)" class="lnk resultClear">清空</a> </form>
解决方案：
在css样式中对file控件的定位加!important;
.betting-step #file{left:193px!important;top:30px;}