jquery - 如何使div容器在IE11中自动适应其固定大小的子元素

Question

我正在使用 jquery UI 对话框来显示一些标签字段对，该字段可以是 textarea并具有预先配置的固定大小。

我将 UI 对话框的宽度和高度设置为 auto , 所以它可以适应不同的尺寸。

UI 对话框中的 HTML 如下所示:

<div class="content">
  <div class="content-row">
    <div class="content-label">
      <span id="msg-label" class="label">Message</span>
    </div>
    <div class="content-field">
      <span class="message-body">
        <textarea style="height: 152px; width:256px;" class="msg-textarea" maxlength="255" placeholder="Message Body" ></textarea>
      </span>
    </div>
  </div>
</div>

由于某种原因，标签的宽度<div class="content-label">设置为 90px 和 <div class="content-field">有 100 像素的左边距使它们排成一行。

CSS:

.content-row .content-label {
  width: 90px;
  float: left;
  text-align: right;
  white-space: nowrap;
  font-size: 13px;
  border: 1px solid blue;
}

.content-row .content-field {
  font-size:13px;
  margin-left:100px;
  overflow:hidden;
  border: 1px solid red;
}

.msg-textarea {
  box-sizing:border-box;
  display:inline-block;
}

该代码适用于 Chrome 和 Firefox，但不适用于 IE11，在 IE11 中，<div class="content-field">比textarea占用更多的水平空间，看起来div的宽度等于textarea的宽度加上lable的宽度。

编辑:我会保留 margin-left:100px因为它不仅用于间距，对于其他功能也很重要，需要保留。

编辑:添加 jquery UI 对话框标签，可能是 UI 对话框在 IE11 上以错误的方式计算内容宽度？

我想知道是否有办法让这个解决方案也适用于 IE 11？谢谢!

Demo on JSFiddle

Answer 1

解决方案是:从.content-row.content-field中删除margin-left:100px;。这是jsfiddle的链接.希望对你有帮助