• ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决


    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究。

    今天偶尔发现有ZeroClipboard这么个好玩意,能跨浏览器解决复制剪切板的问题,于是兴冲冲的拿来用用,但是放上去后发现怎么也不成功,绑定的对象鼠标都不变手型。

    又换了jquery.zclip.min.js还是不行,真是怀疑最近几天没有休息好,于是去床上躺了一会回来仔细再研究下。

    审查元素发现,原来js生成的放swf的div被我的css代码中的一句 

    div{padding:50px 0 0 0;}

    给下移了50像素!!!

    再看生成的div的代码:

    <div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; left: 392px; top: 213px;  800px; height: 30px; /* z-index: 99; */"><embed id="ZeroClipboardMovie_1" src="coupon/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="800" height="30" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=800&height=30" wmode="transparent"></div>

    注意这个div的样式只定义了

     1 position: absolute; left: 392px; top: 213px; 800px; height: 30px; /* z-index: 99; */ 

    也就是它的margin、padding、float、等等会影响位置的定义还会受公共定义的影响的。

    而这个插件是必须上这个DIV覆盖在绑定的元素位置上才OK的。

    所以去掉对标签名称div的样式定义,这个好用的跨浏览器复制js正常工作了!

    所以以后写css的时候要注意尽量少使用标签定义样式,以免发生类似的问题。

    更晕更健康。。。
  • 相关阅读:
    codevs 1163:访问艺术馆
    codevs 2853:方格游戏
    冲刺Noip2017模拟赛2 解题报告——五十岚芒果酱
    HDU 1317:XYZZY
    codevs 1380:没有上司的舞会
    POJ 1734:Sightseeing trip
    lesson 23 one man's meat is another man's poison
    wordlist 4
    TPO-12 C1 Revise a Hemingway paper
    lesson 22 by heart
  • 原文地址:https://www.cnblogs.com/aaa/p/5037664.html
Copyright © 2020-2023  润新知