Fieldset 在 Edge、FF、Chrome 但不是 IE11 中破坏了布局？

Question

如果我运行在 IE11 中 fieldset 保持 300px 宽度，但在 Edge、FF 和 Chrome 中它只是扩展直到它可以容纳整个内容是否有如何使它在 Edge、FF 和 Chrome 中的行为与在 IE11 中的行为相同？（这里的想法是，我用一个 class 定义 LabelWidth，用一个定义总宽度，UI 只是适应）。

注意：如果您删除 fieldset 和 legend 它就可以在所有浏览器中开箱即用，如果您将字段集替换为 div 它是否有效？

我更喜欢基于 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>

Answer 1

仔细阅读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>

Answer 2

此处存在一些类型错误，例如使用 Fields 而不是 Field，并且您的代码比您需要的多。

fieldset {
  border: black 1px solid;
  max-width: 300px;
}

.Field input, span {
  display: inline-block;
  width:80%;
}

.Field label {
  width: 20%;
}


table {
    border: 1px solid black;
    margin: 5px;
    max-width: 300px;
}

td input {
    width: 90%;
}

HTML

  <fieldset class="LabelSize100">
     <legend>Test</legend>
      <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>
  </fieldset>
<br><br>
<table>
<tbody>
    <tr>
        <td><label>test:</label></td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td><label>test:</label></td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td nowrap><label>test 2:</label></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</td>
    </tr>
</tbody>
</table>

我建议使用 table。

Fieldset 在 Edge、FF、Chrome 但不是 IE11 中破坏了布局？

Fieldset breaks layout in Edge, FF, Chrome but not IE11?

html

css

internet-explorer-11