Firefox не уважает переполнение: скрыто

Я пытаюсь настроить форму, которая отображает вертикальный разделитель между двумя элементами, которые появляются рядом. Это параметры проблемы:Firefox не уважает переполнение: скрыто

Высота любого из элементов неизвестна и будет изменяться в результате изменения содержимого JavaScript в ответ на взаимодействие пользователя.
Сепаратор должен охватывать всю общую вертикальную границу элементов, независимо от того, какой элемент в этот момент становится более высоким.

Учитывая вышеизложенное, кажется, что эта установка будет делать трюк:

<div>This is some text on top.</div> 
<ol> 
    <li id="a">Lalalala</li> 
    <li id="b">Lololol</li> 
</ol> 
<div>And some text on the bottom.</div>

CSS

ol { overflow: hidden } 
li { float: left; width: 5em; padding: 4px } 
div { clear: both } 

#a { background: gold; min-height: 100px } 
#b { background: yellow; border-left: 1px black dotted } 
#b { padding-bottom: 400px; margin-bottom: -400px } /* "infinitely" tall */

Идея заключается в том, что второй элемент становится «бесконечно высоким», применяя нижние отступы и получает левую границу; элементы, следующие за группой, возвращаются в исходное положение, противодействуя прокладке с отрицательным нижним краем; и «неиспользуемая» часть вертикальной границы скрыта путем предоставления родительскому overflow: hidden.

Эта установка действительно работает правильно (JsFiddle) на Firefox, Chrome и (требования моей совместимости) IE> = 8:

Proof of concept

Однако, когда я пытаюсь применить ту же технику, в моем real HTML Firefox ломается и, кажется, не почитает overflow: hidden, установленный на родительском элементе. В результате бесконечно высокая вертикальная граница пропускает все элементы, следующие за двумя панелями на странице.

Here - это JSFiddle (упрощенный) настоящий экземпляр/вставленный контент вместе с моими фактическими правилами CSS, которые показывают проблему. Обратите внимание, что только Firefox это неправильно; другие браузеры продолжают отображать его правильно.

корректному рендер:

Correct render

Firefox делают:

Firefox render

Я правильно поставлен в тупик: почему Firefox отображает доказательство концепции правильно и портить реальное дело? И как я могу это исправить?

источник

2013-12-09 Jon

Вы пробовали функцию поиска? http://stackoverflow.com/questions/1673346/fieldset-firefox-overflow-css-fix http://stackoverflow.com/questions/19025873/how-come-overflowhidden-works-on-a-div-but -not-a-fieldset-in-firefox – Jarno

@Jarno Интересная ссылка. Этот другой вопрос может указывать на связанную ошибку, но решение/обходное решение не кажется очевидным. Этот вопрос по-прежнему справедлив для меня. –

@Jarno: На самом деле у меня есть, но без пользы от ретроспективы совсем не ясно, что в поиске нужно включить «fieldset» - он может отфильтровать действительно интересные результаты. В любом случае, спасибо за вклад. – Jon

Я смог исправить свой JSFiddle, изменив элемент fieldset на div или окружив его с помощью div, у которого переполнение было скрыто. Возможно, стоит попробовать. Является ли тег fieldset существенным для вашего HTML?

источник

2013-12-09 21:17:06 devonnigelreed

Спасибо за ваш вклад. Набор полей очень важен и не может быть изменен. Окружая его другим элементом, он решит проблему, но он добавит дополнительную разметку, которая в этом случае нежелательна. Я, вероятно, буду использовать другое решение, но в общем случае это может быть хорошо. – Jon

Firefox не уважает переполнение: скрыто

ответ

Смежные вопросы