«текст -выровнять :по ширине;» встроенные -блочные элементы правильно?

Несколько других вопросов уже касались того, как лучше всего применить text-align: justifyдля равномерного распределения встроенных -блочных элементов… например, Как мне *на самом деле *выровнять горизонтальное меню в HTML+ CSS?

Однако элемент ширины 100%, который «очищает» строку встроенных элементов блока -, получает от браузера отдельную строку. Я не могу понять, как избавиться от этого пустого вертикального пространства, не используя line-height: 0;для родительского элемента.

Для примера проблемы см. эту скрипку

Для моего решения, которое использует line-height: 0;, см. эту скрипку

Решение, которое я использую, требует, чтобы новый line-heightприменялся к дочерним элементам, но любой ранее установленный line-heightтеряется. Кто-нибудь знает лучшее решение? Я хочу избежать таблиц, чтобы элементы могли переноситься при необходимости, а также flexbox, потому что поддержки браузера еще нет. Я также хочу избежать поплавков, потому что количество разнесенных элементов будет произвольным.