为什么这段把东西插入格子的代码只有在火狐中正常？求大神帮忙！
<!DOCTYPE html>
<html lang="zh-CN" ng-app="cakefun">
<head>
<meta charset="utf-8">
</head>
<style>
.canvastable{
width:330px;
height:330px;
transform: rotateX(64deg) rotateZ(37deg) translate(80px,10px);
position:absolute;
z-index:999;
cursor:pointer;
}
.td{
width:12.5%;
height:12.5%;
float:left;
border:1px solid #eee;
}
.td:hover{
background-color:rgba(0,0,0,0.3);
}
</style>
<body>
<div class="canvastable">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var div = document.createElement("div");
$(div).css({"position":"absolute","display":"block","width":"30px","height":"30px","z-index":"999","background":"red"});
$("body").append($(div));
$(document).mousemove(function(ev){
var x = ev.pageX,
y = ev.pageY;
$(div).css({"left":x,"top":y});
});
$(".td").click(function(){
if($(this).children().length){
$(this).empty();
}
else{
$(this).append(function(){
var obj = $(div).clone().css({"width":"30px","position":"static"});
return obj;
});
}
});
</script>
</body>
</html>运行后可以看到左边有一个个小格子，鼠标悬浮有黑色高亮效果，点击小格子会将红色的div元素插入进格子。亲测火狐可用，但是chrome和safari不能把div插进去，求问哪里导致了兼容性问题？
展开
收起
1
条回答
写回答
写回答
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
