html - Fieldset破坏了Edge，FF，Chrome而不是IE11的布局？

如果我在ie11中运行这个fieldset会保持300px的宽度，但是在edge、ff和chrome中，它会一直扩展到可以容纳整个内容，有没有办法让它在edge、ff和chrome中的行为与ie11中一样？
（这里的想法是，我用一个类定义labelwidth，用一个定义总宽度，而ui只是自适应的）。
注意：如果您删除fieldset和legend它在所有浏览器中都是开箱即用的，如果您用div替换fieldset，它也能工作吗？
我更喜欢一个基于css的解决方案，不需要修改html。

* {
  box-sizing: border-box;
}
.Width300 {
  width: 300px;
  padding: 5px;
}
fieldset {
  border: black 1px solid;
}
.Field {
  white-space: nowrap;
  min-height: 26px;
  padding: 1px 0;
}
label {
  float: left;
  display: inline-block;
}
input,
span {
  display: inline-block;
  width: 100%;
}
span {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}
.LabelSize100 .Field {
  margin-right: 100px;
}
.LabelSize100 label {
  width: 100px;
}

<div class="LabelSize100 Width300">
  <fieldset>
    <legend>Test</legend>
    <div class="Fields">
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test2:</label>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</span>
      </div>
    </div>
  </fieldset>
</div>

最佳答案

仔细阅读specs我想您可以添加min-width: 0到fieldset元素：

* {
  box-sizing: border-box;
}
.Width300 {
  width: 300px;
  padding: 5px;
}
fieldset {
  border: black 1px solid;
  min-width: 0;
}
.Field {
  white-space: nowrap;
  min-height: 26px;
  padding: 1px 0;
}
label {
  float: left;
  display: inline-block;
}
input,
span {
  display: inline-block;
  width: 100%;
}
span {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}
.LabelSize100 .Field {
  margin-right: 100px;
}
.LabelSize100 label {
  width: 100px;
}

<div class="LabelSize100 Width300">
  <fieldset>
    <legend>Test</legend>
    <div class="Fields">
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test2:</label>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</span>
      </div>
    </div>
  </fieldset>
</div>

关于html - Fieldset破坏了Edge，FF，Chrome而不是IE11的布局？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34417038/