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

Question

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?

Answer 1

ОБНОВЛЕНИЕ:

По состоянию на недавнее обновление 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; }

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

Answer 2

Используя псевдополе (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;
}

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

Answer 3

Использование 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);
});

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

Answer 4

Попробуйте:

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

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

Answer 5

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