为什么这段把东西插入格子的代码只有在火狐中正常?求大神帮忙! -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

为什么这段把东西插入格子的代码只有在火狐中正常?求大神帮忙!

2016-06-16 14:36:30 1750 1
<!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)
  • 西秦说云
    2019-07-17 19:40:51

    好像是 跟随鼠标的那个红色区块挡住了高亮的小格子 鼠标根本没有点到吧

    0 0
相关问答

1

回答

web端上传oss 出现上传文件过大,但是文件只有400kb

2018-09-13 12:45:47 1041浏览量 回答数 1

1

回答

eclipse ee开发WebApp好后,怎样上传到自己的网站。

2016-11-19 01:30:20 1600浏览量 回答数 1

0

回答

请教一下大家,为什么A填充可以,B列为什么填充不上,我看代码半天也没找到原因。

2019-10-11 16:20:45 177浏览量 回答数 0

1

回答

请问购买的商之翼298元一站式建站的ftp的账号密码是什么?

2016-04-09 22:47:36 6569浏览量 回答数 1

1

回答

在更换不同账号的accesskey,web前端源代码中script data-app的值要更换吗?

2020-03-27 19:54:05 454浏览量 回答数 1

1

回答

使用java向csv格式的文件数据追加行数据的性能最优的做法是什么?

2021-11-06 17:47:05 209浏览量 回答数 1

1

回答

java中将File文件对象写入ServletOutputStream对象的性能最优方法是什么?

2021-11-06 20:47:25 306浏览量 回答数 1

0

回答

请问java中将File文件对象写入ServletOutputStream对象的性能最优方法是什么?

2021-11-12 17:21:38 186浏览量 回答数 0

1

回答

linux中跟代码passwd -x的作用相同的代码是什么?

2021-12-01 18:28:41 85浏览量 回答数 1

1

回答

Linux中的工具Nemesis(命令行式的UNIX网络信息包插入套件)的具体信息以及渠道是什么?

2021-12-05 21:31:39 257浏览量 回答数 1
+关注
杨冬芳
IT从业
文章
问答
问答排行榜
最热
最新
相关电子书
更多
《0代码搭应用》
立即下载
不止代码
立即下载
低代码开发师(初级)实战教程
立即下载