最新版本Firefox表单css兼容性
场景描述:
为了在各浏览器上传控件保持统一的风格,用隐藏“浏览控件”的方式,在最新版本的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兼容性的更多相关文章
- form-create 3.0 版本发布,好用的Vue3版本动态表单生成组件
form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...
- 2014.9.16HTML表单CSS
(一)表格 合并单元格(少用) (合并列) 1.先选中要合并的2个或多个单元格,然后点击以下图标 代码:<td colspan="2"> </td> 2.设 ...
- HTML表单 CSS样式
1.HTML表单 <body rightmargin="50" leftmargin="50" background="未标题-1.jpg&qu ...
- chromedriver与chrome最新版本对应表
如果需要看到最新版的chromedriver和chrome版本对应问题,点击http://npm.taobao.org/mirrors/chromedriver/,点击最新版本的chromedrive ...
- 0522 HTML表单 CSS基础
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)
开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...
- 2020最新Servlet+form表单实现文件上传(图片)
servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...
- 28. 表单css样式定义格式
form>table>tbody>tr>td{padding:5px;font-size:14px;font-family:"Microsoft YaHei" ...
- html+css学习笔记 5[表格、表单]
表格 -- 默认样式重置 表格标签: table 表格 thead 表格头 tbody 表格主体 tfoot 表格尾 tr 表格行 th 元素定义表头 ...
随机推荐
- windows下的 gvim - su'blime text 的使用
su'blime [s2'blaim] adj. n. 崇高的, 高尚的, 令人尊敬的; 壮丽的, 宏伟的; 出众的; 崇高的人, 壮丽的事物等等. a sublime mission. a subl ...
- P1349 广义斐波那契数列(矩阵加速)
P1349 广义斐波那契数列 题目描述 广义的斐波那契数列是指形如an=pan-1+qan-2的数列.今给定数列的两系数p和q,以及数列的最前两项a1和a2,另给出两个整数n和m,试求数列的第n项an ...
- redis linux版本自定义安装目录、注册服务、自启动设置、一台计算机安装多个redis
自定义安装目录并安装 1.mkdir /usr/local/redis 2.下载redis到 /usr/local/src/,解压,进入解压后的目录 3.安装到指定目录 make PREFIX=/us ...
- AlexNet网络结构特点总结
参考论文:ImageNet Classification with Deep Convolutional Neural Networks 1.特点 1.1 ReLU Nonlinearity的提出 Re ...
- Unity3D学习笔记(十三):委托、考试复习
委托:比较什么时候用委托好 下课案例:不用下课铃 1.ClassManager需要拿到所有教室的引用,课堂管理者应该只负责计时并告知每间教室 2.每间教室应该是由当班老师负责是否需要下课,而课堂管 ...
- POJ 1953 World Cup Noise(递推)
https://vjudge.net/problem/POJ-1953 题意:输入一个n,这n位数只由0和1组成,并且不能两个1相邻.计算共有多少种排列方法. 思路:递推题. 首先a[1]=2,a[2 ...
- Springboot 学习笔记 之 Day 2
“约定大于配置”这样一句话,就是说系统,类库,框架应该假定合理的默认值,而非要求提供不必要的配置,可是使用Spring或者SpringMVC的话依然有许多这样的东西需要我们进行配置,这样不仅徒增工作量 ...
- ASP.NET MVC实现网站验证码功能
网站添加验证码,主要为防止机器人程序批量注册,或对特定的注册用户用特定程序暴力破解方式,以进行不断的登录.灌水等危害网站的操作.验证码被广泛应用在注册.登录.留言等提交信息到服务器端处理的页面中. 在 ...
- Struts2文件上传的大小限制问题
问题:上传大文件报错…… 解决:修改struts.xml文件中的参数如下 <constant name="struts.multipart.maxSize" value= ...
- IntelliJ IDE 开发Java GUI 入门
j主要对java 的GUI相关知识进行简单的介绍和总结,整个博客按照创建一个java GUI的顺序进行介绍,期间穿插讲解用到的java Swing的布局.控件等相关知识.本博客所进行的讲解及工程的创建 ...