之前写过一个淘宝优惠券连接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的时候要注意尽量少使用标签定义样式,以免发生类似的问题。