场景描述:

  为了在各浏览器上传控件保持统一的风格,用隐藏“浏览控件”的方式,在最新版本的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;}

最新版本Firefox表单css兼容性的更多相关文章

  1. form-create 3.0 版本发布,好用的Vue3版本动态表单生成组件

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  2. 2014.9.16HTML表单CSS

    (一)表格 合并单元格(少用) (合并列) 1.先选中要合并的2个或多个单元格,然后点击以下图标 代码:<td colspan="2"> </td> 2.设 ...

  3. HTML表单 CSS样式

    1.HTML表单 <body rightmargin="50" leftmargin="50" background="未标题-1.jpg&qu ...

  4. chromedriver与chrome最新版本对应表

    如果需要看到最新版的chromedriver和chrome版本对应问题,点击http://npm.taobao.org/mirrors/chromedriver/,点击最新版本的chromedrive ...

  5. 0522 HTML表单 CSS基础

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  6. chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)

    开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...

  7. 2020最新Servlet+form表单实现文件上传(图片)

    servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...

  8. 28. 表单css样式定义格式

    form>table>tbody>tr>td{padding:5px;font-size:14px;font-family:"Microsoft YaHei" ...

  9. html+css学习笔记 5[表格、表单]

    表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头 ...

随机推荐

  1. 20145101《Java程序设计》第一周学习总结

    20145101 <Java程序设计>第1周学习总结 教材学习内容总结 开学的第一周,通过课上老师的介绍和课下阅读教材我简单的了解java的发展历程,了解了JVM.JRE.JDK分别是什么 ...

  2. 20145127《java程序设计》第二次实验

    一.实验内容及其步骤 1.要想对某个程序进行单元测试,我们先是在eclipse中建立了一个新的项目,项目的名字是TDDDmeo.并在这个新的项目里右键单击创建一个source floder.并将flo ...

  3. 《网络攻防》实验八:Web基础

    适逢多事之际,下周二的课设答辩.全国信安竞赛初赛作品筹备.协会密码沙龙比肩接踵,这些"案牍"不仅劳形还影响了我的复习计划."甘蔗没有两头甜的"还是要有所舍得了, ...

  4. 20145313张雪纯MSF基础应用实验

    实验博客 ms08_067攻击实验 http://www.cnblogs.com/entropy/p/6690301.html ms11_050漏洞攻击 http://www.cnblogs.com/ ...

  5. linux内核分析 第7章读书笔记——《深入理解计算机系统》

    第七章 链接 --<深入理解计算机系统> 链接是将各种代码和数据部分收集起来并组合成为一个单一文件的过程,这个文件可被加载(或拷贝)到存储器并执行. 一.编译器 大多数编译系统提供编译驱动 ...

  6. HTTP If-Modified-Since引发的浏览器缓存汇总

    在看Spring中HttpServlet的Service方法时,对于GET请求,代码逻辑如下: if (method.equals(METHOD_GET)) { long lastModified = ...

  7. android 通过webview调起支付宝app支付

    网站学习:http://blog.csdn.net/zhuyu19911016520/article/details/71763900

  8. 分析linux内核中的slub内存管理算法

    1. 分析的linux内核源码版本为4.18.0 2. 与slub相关的内核配置项为CONFIG_SLUB 3. 一切都从一个结构体数组kmalloc_caches开始,它的原型如下: ] __ro_ ...

  9. 再谈树---无根树转有根树( dfs搜索转化+fa数组记录父节点) *【模板】

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include <vector> ...

  10. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...