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

Question

如果我在IE11上運行此fieldset停留在300像素寬度，但是在邊緣，FF和鉻，它只是擴展，直到它能夠適應整個內容，有什么辦法使這種行為在邊緣，FF和Chrome相同的方式，它在IE11？ （這里的想法是我用一個類定義LabelWidth，總寬度為1，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

閱讀更仔細的規格我認為你可以添加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>

我建議使用一張桌子。