最新版本Firefox表單css兼容性

場景描述:javascript

  爲了在各瀏覽器上傳控件保持統一的風格,用隱藏「瀏覽控件」的方式,在最新版本的Firefox下隱藏的「瀏覽」按鈕漂移了。css

問題分析:java

  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解析代碼:post

<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;"this

  在Chrome下的HTML解析代碼:spa

 

<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>

解決方案:code

  在css樣式中對file控件的定位加!important;orm

.betting-step  #file{left:193px!important;top:30px;}
相關文章
相關標籤/搜索