отображение webkit: встроенный блок ведет себя непоследовательно

Question

У меня есть диапазон с несколькими другими интервалами внутри, и я хочу переключать субпанели между display:block и display:inline. Пролеты начинаются с display:inline-block, затем переключаются на display:block. Это отлично работает. Проблема заключается в переключении обратно в Webkit (он отлично работает в Firefox): промежутки отображаются с дополнительными разрывами строк между ними.

Можно ли сделать этот рендеринг правильно, не помещая теги <br/> между пролетами?

демо здесь: http://jsbin.com/omalu3/4/edit

Answer 1

Любое другое решение будет обходным путем, так как это ошибка браузера.Альтернатива решению Дерекермана:

  #a.multiline * { width: 100% }
  #a.oneline * { width: auto }
  #a * { border:solid 1px black; display:inline-block }

Answer 2

Другой обходной путь - не оборачивать дочерние промежутки другим промежутком, который является встроенным элементом.Используйте

для #a, и он ведет себя правильно (по крайней мере, в Webkit!).

С другой стороны, селектор звезд не очень эффективен, хотя я понимаю, что это только пример, поэтому яне собираюсь здесь критиковать: D

Answer 3

Сейчас это не так весело.

Я не уверен, что является причиной проблемы, но она исчезнет, ​​если вы добавите float: left; к #a.oneline *.Когда вы сделаете это, вы можете изменить отображение на блокирование, чтобы ваши стили выглядели так:

#a.multiline * {  }
#a.oneline * { float:left; }
#a * { border:solid 1px black; display:block;}

Единственное отличие этого решения от вашего исходного макета состоит в том, что блоки oneline будут выровнены поtop вместо bottom, но вы можете установить фиксированную высоту для этих элементов.