Question

如果我在IE11中运行此版本fieldset保持300px宽度，但在Edge，FF和Chrome中它只是扩展直到它能够适合整个内容有没有办法使这种行为在Edge中表现相同，IE和Chrome与IE11一样吗？（这里的想法是我用一个类定义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>

我建议使用表格。

Fieldset打破Edge，FF，Chrome中的布局，但不打破IE11？

2 个答案: