最新版本Firefox表单css兼容性
2014-02-09 15:50
330 查看
场景描述:
为了在各浏览器上传控件保持统一的风格,用隐藏“浏览控件”的方式,在最新版本的Firefox下隐藏的“浏览”按钮漂移了。
问题分析:
HTML代码:
在Firefox下的HTML解析代码:
不难发现在file控件上多了个内联样式style="left:-12px;"
在Chrome下的HTML解析代码:
解决方案:
在css样式中对file控件的定位加!important;
为了在各浏览器上传控件保持统一的风格,用隐藏“浏览控件”的方式,在最新版本的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;}
相关文章推荐
- IE和Firefox在JS和CSS方面的兼容性
- IE和Firefox在css,JavaScript方面的兼容性
- [转]DIV+CSS在IE7/IE6/Firefox间的兼容性问题
- IE6.0,ie7.0与Firefox的CSS兼容性问题
- CSS在IE浏览与Firefox间最常见的不兼容性问题
- CSS:IE,Chrome,Firefox兼容性和CSS Hack
- CSS:IE,Chrome,Firefox兼容性和CSS Hack(转载)
- IE和Firefox在css,JavaScript方面的兼容性
- CSS兼容性(IE和Firefox)技巧大全
- Ubuntu全新安装firefox最新版本
- 解決IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法
- ubuntu系统如何将firefox升级到最新版本
- CSS:IE,Chrome,Firefox兼容性和CSS Hack
- CSS兼容性解决方法(盒模型)- !important的IE7,Firefox问题
- IE6/Firefox CSS兼容问题 - 解决IE5/IE5.5/IE6/Firefox的CSS兼容性问题
- 解决ubuntu下firefox升级到当前最新版本
- dIV+CSS+JS仿的兼容性很好的下拉选择表单
- 最新ie6/ie7/ie8/ie9版本的Css if hack条件语法操作说明
- CSS兼容性(IE和Firefox)技巧大全
- CSS兼容性(IE和Firefox)技巧