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">的左边距为100px，以使它们成为一行。

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的宽度加上标签的宽度。

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

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

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

Demo on JSFiddle

Answer 1

解决方案是：从margin-left:100px;移除.content-row .content-field。这是jsfiddle的链接。希望它有所帮助

Answer 2

考虑以下建议，它在CSS上更轻松 - 并且还会使整个内容符合textarea大小。

HTML

<div class="content">
  <div class="label">Label :</div>
  <div class="input"><textarea></textarea></div>
</div>

CSS

.content{
  padding : 10px;
  background : #efefef;
  display : inline-block;
}

.label{
  display : inline-block;
  vertical-align : top;
}

.input{
  display : inline-block;
}

.input textarea{
  width  : 200px;
  height : 200px;
}

小提琴：https://jsfiddle.net/gvbbgy25/

如何使一个div容器自动适应IE11中固定大小的子元素

2 个答案: