场景描述:

  为了在各浏览器上传控件保持统一的风格,用隐藏“浏览控件”的方式,在最新版本的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. windows下的 gvim - su'blime text 的使用

    su'blime [s2'blaim] adj. n. 崇高的, 高尚的, 令人尊敬的; 壮丽的, 宏伟的; 出众的; 崇高的人, 壮丽的事物等等. a sublime mission. a subl ...

  2. P1349 广义斐波那契数列(矩阵加速)

    P1349 广义斐波那契数列 题目描述 广义的斐波那契数列是指形如an=pan-1+qan-2的数列.今给定数列的两系数p和q,以及数列的最前两项a1和a2,另给出两个整数n和m,试求数列的第n项an ...

  3. redis linux版本自定义安装目录、注册服务、自启动设置、一台计算机安装多个redis

    自定义安装目录并安装 1.mkdir /usr/local/redis 2.下载redis到 /usr/local/src/,解压,进入解压后的目录 3.安装到指定目录 make PREFIX=/us ...

  4. AlexNet网络结构特点总结

    参考论文:ImageNet Classification with Deep Convolutional Neural Networks 1.特点 1.1 ReLU Nonlinearity的提出 Re ...

  5. Unity3D学习笔记(十三):委托、考试复习

    委托:比较什么时候用委托好   下课案例:不用下课铃 1.ClassManager需要拿到所有教室的引用,课堂管理者应该只负责计时并告知每间教室 2.每间教室应该是由当班老师负责是否需要下课,而课堂管 ...

  6. POJ 1953 World Cup Noise(递推)

    https://vjudge.net/problem/POJ-1953 题意:输入一个n,这n位数只由0和1组成,并且不能两个1相邻.计算共有多少种排列方法. 思路:递推题. 首先a[1]=2,a[2 ...

  7. Springboot 学习笔记 之 Day 2

    “约定大于配置”这样一句话,就是说系统,类库,框架应该假定合理的默认值,而非要求提供不必要的配置,可是使用Spring或者SpringMVC的话依然有许多这样的东西需要我们进行配置,这样不仅徒增工作量 ...

  8. ASP.NET MVC实现网站验证码功能

    网站添加验证码,主要为防止机器人程序批量注册,或对特定的注册用户用特定程序暴力破解方式,以进行不断的登录.灌水等危害网站的操作.验证码被广泛应用在注册.登录.留言等提交信息到服务器端处理的页面中. 在 ...

  9. Struts2文件上传的大小限制问题

      问题:上传大文件报错…… 解决:修改struts.xml文件中的参数如下 <constant name="struts.multipart.maxSize" value= ...

  10. IntelliJ IDE 开发Java GUI 入门

    j主要对java 的GUI相关知识进行简单的介绍和总结,整个博客按照创建一个java GUI的顺序进行介绍,期间穿插讲解用到的java Swing的布局.控件等相关知识.本博客所进行的讲解及工程的创建 ...