Question

这是一个更为复杂的问题的摘录，但问题归结为：代码适用于FF43，但不适用于IE11。两天后，我确定你可以通过减少外包装的宽度来使FF输出看起来像IE输出。我尝试了位置，浮动，显示等方面的变种，但都无济于事。

随着内容的增长，目标是让内容div首先水平调整大小（展开所有包装器），然后在达到外部宽度限制时垂直调整内容div的大小。有什么想法吗？

<!DOCTYPE html>

<style>
.wrapper { xwidth:480px; border:1px solid violet; }
.formbox { display: inline-block; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; background: #FFFFFF; border:1px solid black; }
.row { display: block; border: 1px solid #ccc; margin:3px; padding:4px; clear:both; position:relative; }
.label { float:left; display:inline-block; width:120px; text-align:right; padding-right:4px; border:1px solid red; }
.icons { float:right; width:40px; border:1px solid red; text-align:center;  }
.input { display:inline-block; border: 1px solid green; }
</style>

<div class="wrapper">

<div class="formbox">
  <div class="row">
    <div class="label">Label:</div>
    <div class="icons">XX</div>
    <div class="input">really long wide content really long wide content</div>
  </div>
  <div class="row">
    <div class="label">Label:</div>
    <div class="icons">XX</div>
    <div class="input">really long wide content really long wide content</div>
  </div>
    <div class="row">
    <div class="label">Label:</div>
    <div class="icons">XX</div>
    <div class="input">really long wide content really long wide content</div>
  </div>
    <div class="row">
    <div class="label">Label:</div>
    <div class="icons">XX</div>
    <div class="input">really long wide content really long wide content</div>
  </div>
</div>
</div>

小提琴：https://jsfiddle.net/des2016/r7x6d2tw/

浮点之间的div在Firefox中有效，但在IE11中则不行

0 个答案: