JQuery 可调整大小更改 IE11 中的列宽

Question

我有一张放在 div 中的表格。表由 2 列和 1 行的表头组成，列跨度为 2。td 和 th 内的元素是 div 和输入字段。该行占表格宽度的 100%， 第一个标题列使用 90% 的宽度，第二列使用它剩下的任何内容。 我将 JQuery 的可调整大小应用于标题中的第一列和表的行。它在 Firefox 中完美运行，但在 IE11 中却不行。一旦您开始调整表格行中 div 的大小，无论如何，标题的列宽都会自动调整为 50%。为什么会这样？下面是示例代码：

function applyResizable(element) {
  element.resizable({
    resize: function(event, ui) {
      ui.size.width = ui.originalSize.width;
    }
  });
  console.log(element);
  $(".ui-resizable-handle.ui-resizable-e").remove();
}

$(document).ready(function() {
  applyResizable($(".resizable"));
});

body textarea {
  resize: vertical;
  margin: 0;
  overflow: none;
  box-sizing: border-box;
}
th.th-question-container {
  width: 90%;
}
div.with-borders {
  border-style: solid;
  border-width: 1px;
  padding: 1em;
}
div.legal-page-div {
  width: 100%;
  height: 850px;
  margin-bottom: 10px;
  vertical-align: top;
  position: relative;
}
div#legal-page-div-wrapper {
  position: relative;
  width: 80%;
  padding-bottom: 10px;
  padding-top: 10px;
}
table {
  position: absolute !important;
  width: 93% !important;
  border: 0px none;
  border-spacing: 0px;
  font-size: 0.857em;
  margin: 10px 0px;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="legal-page-div-wrapper" class="form-wrapper">
  <div class="with-borders legal-page-div form-wrapper" id="legal-page-div-1">
    <table id="Q1">
      <thead>
        <tr>
          <th class="th-question-container">
            <div class="question-div with-borders resizable form-wrapper" id="edit-q1" contenteditable="true"></div>
          </th>
          <th>
            <div class="form-item form-type-textfield form-item-W1">
              <input id="edit-w1" name="W1" value="" size="2" maxlength="2" class="form-text" type="text">
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2">
            <div class="with-borders answer-div resizable form-wrapper" id="edit-a1" contenteditable="true"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

提前致谢。

Answer 1

似乎添加

table { 
  table-layout:fixed; 
}

修复了所有浏览器中的问题