场景描述:

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

    目录: 参考W3school 1.1 变量 1.2 JavaScript中数据类型 1.3 JavaScript中的两种for循环 1.4 条件语句:if.switch.while 1.5 break ...

  2. 20145105 《Java程序设计》第9周学习总结

    20145105 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 一.JDBC入门 (一)JDBC简介 厂商在操作JDBC驱动程序时,依操作方式可将驱动程序分为 ...

  3. 20145212罗天晨 注入shellcode实验及Retuen-to-libc实验

    注入shellcode实验 实验步骤 一.准备一段shellcode 二.设置环境 Bof攻击防御技术 1.从防止注入的角度来看:在编译时,编译器在每次函数调用前后都加入一定的代码,用来设置和检测堆栈 ...

  4. BZOJ 1044: [HAOI2008]木棍分割 DP 前缀和优化

    题目链接 咳咳咳,第一次没大看题解做DP 以前的我应该是这样的 哇咔咔,这tm咋做,不管了,先看个题解,再写代码 终于看懂了,卧槽咋写啊,算了还是抄吧 第一问类似于noip的那个跳房子,随便做 这里重 ...

  5. UVa 127 纸牌游戏(栈)

    https://vjudge.net/problem/UVA-127 题意: 按从左至右的顺序发牌,并摆成一行,发牌不要相互重叠.游戏中一旦出现任何一张牌与它左边的第一张或第三张“匹配”,即花色或点数 ...

  6. Centos下挖XMR门罗币的详细教程

    很多朋友都看过我之前写的Ubuntu下挖XMR门罗币的教程,也有很多朋友提出,为什么不写个Centos的教程出来,今天我在这里就写个Centos的教程,看这个教程前,大家先看看之前的教程,因为里面涉及 ...

  7. workerman如何写mysql连接池

    首先要了解为什么用连接池,连接池能为你解决什么问题 连接池主要的作用1.减少与数据服务器建立TCP连接三次握手及连接关闭四次挥手的开销,从而降低客户端和mysql服务端的负载,缩短请求响应时间2.减少 ...

  8. mui --- 怎么获取百度地图定位功能

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Windows 10 无法调节亮度的解决办法

    我的笔记本在更新完14393后开始的一段时间内是可以正常调节亮度的,但是后来就莫名奇妙地不能调节亮度了,而且电源选项里的亮度调节滚动条也不见了.网上查了很多方法,诸如修改注册表.更新驱动之类的都试过, ...

  10. Qt532_字符编码转换

    1.测试代码: // http://blog.csdn.net/changsheng230/article/details/6588447 QString str = QString::fromLoc ...