zoukankan      html  css  js  c++  java
  • 最新版本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;}
  • 相关阅读:
    Kafka学习笔记之kafka高版本Client连接0.9Server引发的血案排查
    机器学习笔记之python实现朴素贝叶斯算法样例
    机器学习笔记之python实现支持向量机SVM算法样例
    机器学习笔记之AdaBoost算法详解以及代码实现
    机器学习笔记之python实现关联规则算法Apriori样例
    机器学习笔记之python实现AdaBoost算法
    F-47(copy 邓大顾)
    js 设置标题 空白
    微信授权验证
    iphone web 时间 问题
  • 原文地址:https://www.cnblogs.com/cuc-ygh/p/3541498.html
Copyright © 2011-2022 走看看