Fieldset разбивает макет в Edge, FF, Chrome, но не на IE11?

Question

Если я запустил это в IE11, то fieldset остается на ширине 300 пикселей, но в Edge, FF и Chrome он просто расширяется, пока он не поместит весь контент. Есть ли способ сделать это так же, как в Edge, FF и Chrome, так как это происходит в IE11? (идея здесь заключалась в том, что я определяю LabelWidth с одним классом, а общая ширина - с одним, а пользовательский интерфейс только адаптируется).

Примечание: если вы удалите 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

Есть несколько ошибок типа ч например, использовать поля вместо поля, и у вас есть больше кода, чем вам нужно.

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> 

Я хотел бы предложить использовать таблицу.