场景描述:

  为了在各浏览器上传控件保持统一的风格,用隐藏“浏览控件”的方式,在最新版本的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. 20144303石宇森《网络对抗》Web安全基础实践

    20144303石宇森<网络对抗>Web安全基础实践 实验后问题回答 SQL注入攻击原理,如何防御: SQL攻击时通过在输入框中输入语句,构造出SQL命令,把这段命令注入到表单中,让后台的 ...

  2. vim 开启我们的Python之旅

    1.在我们的Mac系统下打开“终端”,输入python,然后回车即可看到我们电脑是否安装了python,以及它的版本,这里我的是2.7.5版本,如果未安装请百度之.

  3. 【转】iOS学习之iOS禁止Touch事件

    iOS程序中有时会有需要禁止应用接收Touch的要求(比如动画进行时,防止触摸事件触发新方法). 一.一般有两种: 1.弄个遮罩层,禁止交互: 2.使用UIApplication中的方法进行相关的交互 ...

  4. Duilib 实现开关按钮

    转载:http://blog.csdn.net/wuan584974722/article/details/25045737 我们在做MFC程序时候经常会一个切换式的按钮,之前我的做法是利用butti ...

  5. 《Python程序设计(第3版)》[美] 约翰·策勒(John Zelle) 第 2 章 答案

    判断对错1.编写程序的好方法是立即键入一些代码,然后调试它,直到它工作.2.可以在不使用编程语言的情况下编写算法.3.程序在写入和调试后不再需要修改.4.Python 标识符必须以字母或下划线开头.5 ...

  6. openwrt的编译方法

    1.获取最新包 ./scripts/feeds update -a 2.安装包 ./scripts/feeds install -a 3.配置 make menuconfig 4.编译 make -j ...

  7. luogu P2114 [NOI2014]起床困难综合症 位运算 二进制

    建议去uoj那里去测,数据比较强 位运算的题目,就得一位一位的分开考虑 然后枚举初始值的最高位是0 是1 的最终攻击 (二进制内)最高位是1肯定比次位是1次次位是1次次次位是1···的大吧,显然 然后 ...

  8. ActiveMQ 集群配置 高可用

    自从activemq5.9.0开始,activemq的集群实现方式取消了传统的Pure Master Slave方式,增加了基于zookeeper+leveldb的实现方式,其他两种方式:目录共享和数 ...

  9. Codeforces Round #426 (Div. 2) C. The Meaningless Game

    C. The Meaningless Game 题意: 两个人刚刚开始游戏的时候的分数, 都是一分, 然后随机一个人的分数扩大k倍,另一个扩大k的平方倍, 问给你一组最后得分,问能不能通过游戏得到这样 ...

  10. [JavaScript] - form表单转json的插件

    jquery.serializejson.js 之前好像记录过,做项目又用到了再记下 在页面中引入js后就可以使用了 示例: //点击设置微信信息的form表单提交按钮后,执行wxConfig的con ...