为什么我的页面在 Firefox 和 IE 11 中看起来不对？

Question

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

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

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

  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));
    }
  }

   .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;
   }

<!DOCTYPE html>

<head>
  <title>Table scroll</title>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <p>Header...</p>
    </div>
    <div id="section-a">
      <table id="table-a">
        <caption ondrop="drop(event)" ondragover="allowDrop(event)">Table A</caption>
        <thead>
          <tr>
            <th>Attribute 1</th>
            <th>Attribute 2</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <table id="table-b">
        <caption ondrop="drop(event)" ondragover="allowDrop(event)">Table B</caption>
        <thead>
          <tr>
            <th>Attribute 1</th>
            <th>Attribute 2</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div id="selector">
      <select>
        <optgroup label="A">
          <option value="1">A</option>
          <option value="2">B</option>
          <option value="3">C</option>
          <option value="4">D</option>
        </optgroup>
        <optgroup label="B">
          <option value="a">a</option>
          <option value="b">b</option>
          <option value="c">c</option>
          <option value="d">d</option>
        </optgroup>
      </select>
    </div>
    <div id="section-b">
      <table id="section-b-list">
        <thead>
          <tr>
            <th>Attribute 1</th>
            <th>Attribute 2</th>
          </tr>
        </thead>
        <tbody>
          <tr draggable="true" id="10" ondragstart="drag(event)">
            <td><a href="#" class="vbtn" draggable="false">Value 1</a>
            </td>
            <td>Value 2</td>
          </tr>
          <tr draggable="true" id="11" ondragstart="drag(event)">
            <td><a href="#" class="vbtn" draggable="false">Value 3</a>
            </td>
            <td>Value 4</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

Answer 1

应删除此行：

   tbody {
     height: 400px;
   }

Answer 2

问题是

tbody {
    height: 400px;
}

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

Answer 3

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

为什么我的页面在 Firefox 和 IE 11 中看起来不对？

Why does my page look wrong in Firefox and IE 11?

html

css

firefox

internet-explorer

google-chrome