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; width: 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的样式只定义了

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

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

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

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

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