最新版本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 元素定义表头 ...
随机推荐
- cmd命令分类
1.系统功能类 AT:计划在计算机上运行的命令和程序.ATTRIB:显示或更改文件属性.BREAK:设置或清除扩展式 CTRL+C 检查.CACLS:显示或修改文件的访问控制列表(ACLs).CALL ...
- Python3基础 try-指定except-as reason 捕获打开一个不存在的文件的时候,会产生OSError异常的示例
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 【附1】hystrix详述(1)
一.hystrix的作用 控制被依赖服务的延时和失败 防止在复杂系统中的级联失败 可以进行快速失败(不需要等待)和快速恢复(当依赖服务失效后又恢复正常,其对应的线程池会被清理干净,即剩下的都是未使用的 ...
- dubbo 实战总结
1,出现重复调用.因为有重试机制,可以改为异步调用或者幂等操作.
- C#学习笔记(十):函数和参数
函数 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...
- The way to Go(2): 语言的主要特性与发展的环境和影响因素
Reference: Github: Go Github: The way to Go 语言的主要特性与发展的环境和影响因素 现有编程语言对于Go语言发展的影响: Why Go? C/C++ 的发展速 ...
- C#在服务端验证客户端证书(Certificate)
使用https协议进行通讯的时候可以设置双向证书认证,客户端验证服务端证书的方法前面已经介绍过了,现在说一下在服务端验证客户端证书的方案. 这里给出的方案比较简单,只需要在Service端的配置文件中 ...
- shell 布尔运算
布尔运算 Bash 里的逻辑运算,与.或.非. 在 Shell 下如何进行逻辑运算 范例:true or false 单独测试 true 和 false,可以看出 true 是真值,false 为假 ...
- ubuntu server 多网卡
https://wenku.baidu.com/view/51fb15742f60ddccdb38a007.html
- 测试报告 之 testNG + Velocity 编写自定义html测试报告
之前用testNG自带的test-outputemailable-report.html,做出的UI自动化测试报告,页面不太好看. 在网上找到一个新的报告编写,自己尝试了一下,埋了一些坑,修改了输出时 ...