Блог

Я использую Bootstrap 3. У меня есть содержащий элемент, содержащий плавающий div и набор полей. Плавающий div имеет ширину 100%, поэтому набор полей должен располагаться под ним. Это работает в FF (который я использовал для разработки), но в chrome / IE набор полей переполняется из контейнера и располагается справа от float .

 .container{
    width:300px;
    position:relative;
    border:1px solid red;
}
.float{
    float:left;
    width:100%;
}  

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div style="float:left;width:100%;">
        <a >Select All</a> / <a >Select None</a>
    </div>
    <fieldset>fieldset</fieldset>
</div>  

Я могу исправить это, добавив clear:left; в набор полей.

Какой браузер правильный? Похоже, что FF ошибочен. Какое правило FF нарушает или исключает, чтобы заставить это отображаться по-другому? Это ошибка?

Обратите внимание, что когда не используется bootstrap, он отображается как ожидалось во всех браузерах, которые я тестировал. В bootstrap, если я использую div вместо набора полей, он также отображает то же самое в браузерах.

Похоже, что это fieldset стиль по умолчанию, переопределенный Bootstrap CSS. Применяется min-width: 0 к fieldset , из-за чего элемент не имеет ширины. Не уверен, почему это было добавлено в Bootstrap, но, вероятно, это как-то связано с тем, что ожидаемый контент является фактическими полями формы, а не просто текстом, как в вашем примере. Попробуйте добавить некоторую допустимую форму HTML согласно ссылке MDN, чтобы посмотреть, улучшит ли это вашу ситуацию.