Question

我正在研究CSS并测试HTML5附带的简单拖放功能。

我准备的页面在Chrome和Opera中看起来不错，但在Firefox和IE 11中完全出错。在IE 11中，甚至无法将最右边的表格中的元素拖到表A和表B的标题上。

为什么会这样？ {/ 1}}元素的高度如何在Firefox / IE中神奇地设置为高值，而不是在Chrome / Opera中？为什么删除在IE 11中不起作用？

＆＃13;

td

＆＃13;

  function drag(event) {
    event.dataTransfer.setData("rowId", event.target.id);
  }

  function allowDrop(event) {
    event.preventDefault();
  }

  function drop(event) {
    event.preventDefault();
    var playerId = event.dataTransfer.getData("rowId");
    var tableBody = event.target.parentNode.getElementsByTagName("tbody");
    if (tableBody) {
      tableBody[0].appendChild(document.getElementById(playerId));
    }
  }

＆＃13;

   .vbtn {
     background: none repeat scroll 0 0 #fafaff;
     border: 1px solid #ddd;
     border-radius: 6px;
     border-spacing: 0;
     box-shadow: 1px 1px 1px #eee;
     padding: 1px 8px;
     text-shadow: 0 2px 5px rgba(120, 120, 120, 0.3);
     vertical-align: baseline;
     white-space: nowrap;
   }
   a {
     color: #175bb0;
     text-decoration: none;
   }
   #wrapper {
     width: 100%;
     overflow: hidden;
   }
   #section-b {
     position: relative;
     margin-left: 10px;
     width: 300px;
     height: 400px;
     float: left;
     overflow: auto;
   }
   #section-a {
     width: 235px;
     float: left;
   }
   #selector {
     margin-top: 10px;
     margin-left: 10px;
     float: left;
   }
   table {
     margin-top: 10px;
     margin-bottom: 10px;
     margin-right: 10px;
     width: 100%;
     border: 1px solid black;
   }
   th,
   td {
     width: 100%;
     border: none;
   }
   thead {
     background: lightgreen;
   }
   thead>tr {
     position: relative;
   }
   tbody {
     height: 400px;
     background: none;
     overflow: auto;
   }

＆＃13;

Answer 1

此行应删除：

   tbody {
     height: 400px;
   }

Answer 2

问题是

tbody {
    height: 400px;
}

尝试将其从代码中删除，然后您就会看到。

Answer 3

在IE 11中拖放的问题是因为页面是从本地文件加载的！当我将文件上传到远程http服务器并从那里访问文件时，问题就消失了！

为什么我的页面在Firefox和IE 11中看起来有问题？

3 个答案: