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

【问题标题】：Why does my page look wrong in Firefox and IE 11?为什么我的页面在 Firefox 和 IE 11 中看起来不对？
【发布时间】：2015-01-21 13:34:26
【问题描述】：

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

我准备的页面在 Chrome 和 Opera 中看起来不错，但在 Firefox 和 IE 11 中完全错误。在 IE 11 中，甚至无法将元素从最右边的表格拖到标题表 A 或表 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>

【问题讨论】：

标签： css html google-chrome internet-explorer firefox

【解决方案1】：

此行应删除：

   tbody {
     height: 400px;
   }

【讨论】：

太好了！知道为什么在 IE 11 中将行放在标题上不起作用吗？
因为浏览器。 IE11 和 Firefox 使用相同的网络浏览器引擎 Gecko。
尝试用 div 替换标题，检查是否正在执行功能删除。我在使用 IE 时遇到问题。
不，这没有帮助。我发现了一些讨论here，但我认为它不适用于我，因为我没有设置Text 或text/plain。
希望对你有帮助link

【解决方案2】：

问题是

tbody {
    height: 400px;
}

尝试从你的代码中删除它，你会看到。

【讨论】：

【解决方案3】：

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

【讨论】：