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

我正在使用jQuery UI对话框来显示一些标签字段对，该字段可能是textarea并且具有预配置的固定大小。如何使一个div容器自动适合它在IE11中的固定大小的子元素

我的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">的宽度设置为90像素和<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的宽度加上标签的宽度。

编辑：我会保持margin-left:100px因为它不仅为间距，这是另一个重要的功能，它需要保持。

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

我想知道是否有一种方法可以让IE浏览器11，以及该解决方案的工作？谢谢！

Demo on JSFiddle

来源

2017-03-06 John.D

考虑以下建议，其对CSS打火机 - 也将导致整个内容以适合文本区域大小。

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/

来源

2017-03-06 08:12:15 levi

谢谢，我想我没有在问题中说清楚，边距不仅仅是间距，它对其他功能起作用，所以我必须保持边距。 –

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

来源

2017-03-06 08:20:45 MKAD

谢谢。我没有说清楚，边距不仅仅是间距，它对其他功能起作用，所以我必须保持边距。否则我会采取这种解决方案。 –

嗯，怎么样设置保证金的权利？ – MKAD

没有，其实现在我怀疑这是谁做的关于IE的内容宽度计算错误的UI对话框。 –

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

回答

相关问题