zoukankan      html  css  js  c++  java
  • 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的时候要注意尽量少使用标签定义样式,以免发生类似的问题。

    更晕更健康。。。
  • 相关阅读:
    C语言基础学习8:指针数组
    C语言基础学习7:返回指针值的函数
    C语言基础学习6: 指向函数的指针
    C语言基础学习5:字符串与指针
    C语言基础学习4:数组与指针
    C语言基础学习3:指针
    python 入门 之二 列表 元组 字典 字符串 集合的定义及基本操作
    python入门之路 一
    whl格式 和egg格式
    python 连接mongodb ,并将EXCEL文档导入mongodb
  • 原文地址:https://www.cnblogs.com/aaa/p/5037664.html
Copyright © 2011-2022 走看看