Google Chrome - ошибка переполнения Fieldset

Google Chrome, похоже, имеет ошибку при переполнении содержимого внутри набора полей.

Вот jsfiddle, который демонстрирует проблему: http://jsfiddle.net/Dismissile/Lnm42/

Если вы посмотрите на страницу, вы увидите, что, когда у вас есть контейнер внутри набора полей, а контейнер имеет overflow: auto, и этот контейнер имеет содержимое, которое будет переполняться по горизонтали, набор полей фактически расширяется вместо использования полоса прокрутки:

<fieldset class="parent">
    <div class="child">
        <div class="grandchild">
            asdf
        </div>
     </div>
</fieldset>

<div class="parent">
    <div class="child">
        <div class="grandchild">
            asdf
        </div>
    </div>
</div>

CSS

.parent {
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}

.child {
    border: 1px solid red;
    padding: 20px;
    overflow: auto;
}

.grandchild {
    border: 1px solid #ccc;
    width: 2000px;
    padding: 10px;
}

Есть ли способ взлома/исправления CSS, который я могу использовать, чтобы содержимое переполнялось должным образом, когда внутри поля в Chrome?

Ответы

Ответ 1

Использование JavaScript для установки ширины окна просмотра:

http://jsfiddle.net/Lnm42/2/

Я добавил класс fieldset-width к набору полей:

<fieldset class="parent fieldset-width">

Затем добавлен этот код JQuery:

$(document).ready(function() {
  $(".fieldset-width").css("width", $(window).width() - 82);
});

$(window).resize(function() {
  $(".fieldset-width").css("width", $(window).width() - 82);
});

Мое единственное замечание состоит в том, что я не могу придумать веские причины вмешиваться в функциональность набора полей по умолчанию. Мне не нравятся "полосы прокрутки в полосах прокрутки" для начала. Для полей ввода, которые обычно окружают поля, я был бы особенно осторожен в том, чтобы заставить пользователя прокручиваться, чтобы добраться до всех полей ввода.

Ответ 2

UPDATE:

Как в недавнем обновлении Chrome для MS Windows (v28, возможно, еще не отследил его), auto больше не является допустимым значением для min-width, и это решение больше не работает!

Новое решение:

Использование inherit вместо auto, похоже, устраняет проблему во всех случаях, которые я тестировал до сих пор. (Включая оригинальную скрипку.. подробнее см. новое исправление скрипта.)

Обновленное исправление: FIELDSET {min-width: inherit; }

Оригинальный ответ:

Chrome определяет для fieldset стиль пользовательского агента по умолчанию: min-width: -webkit-min-content.

Поэтому, когда ваша видимая область (ака "экран" ) меньше вашей div с определенной шириной, -webkit-min-content увеличивает набор полей для размещения размера содержимого (плюс отступы и т.д.).

Исправление: FIELDSET { min-width: auto; }

Я исправил вашу скрипку, попробуйте!

Ответ 3

Используя псевдо-набор полей (aka <div class="fieldset"></div>), я считаю, что вы можете приблизиться. См. jsfiddle.

Попробуйте этот стиль:

fieldset,.fieldset {
   margin: 10px;
   border: solid 1px black;
   position: relative;
   padding: .5em;
}

.legend {
   left: 0.5em;
   top: -0.6em;
   color: black;
   position: absolute;
   background-color: white;
   padding: 0 0.25em 0 0.25em;
}

Он менее идеален, так как стиль стилей должен быть продублирован, но для меня это было единственным приемлемым решением для моей работы с этой проблемой, которую я смог придумать. Как и выше, вы можете применить свой существующий стиль стилей на псевдо-странице.

Ответ 4

Вы можете добавить style = "display: table-column;" к набору полей как обходной путь.

Ответ 5

Try:

fieldset {
  display: table-cell;
  min-width: 0;
  box-sizing: border-box;
}

Это ваш пример с исправлением: http://jsfiddle.net/2u3a9goc/