Как устранить разрыв между элементами при использовании CSS3 table-row / header / footer-group в Firefox?

У меня есть два элемента A, B, которые я хочу позиционировать либо AB либо BA используя только CSS.

Я закончил использование display: table поэтому мой HTML выглядит примерно так:

 <li>
   <a href="#">
      <span class="bottom-caption">Caption</span>
      <img src="www.foo.com" alt="" />
   </a>
 </li>

с CSS:

 li a { display: table; }
 li a > img { display: table-row-group; }
 li a > span.bottom-caption { display: table-footer-group; }
 li a > span.top-caption { display: table-header-group; }

Поместив пролет перед изображением, я могу установить изображение CSS в зависимости от диапазона (span ~ img), сохраняя при этом надпись над или под изображением, просто меняя класс.

Моя единственная проблема заключается в небольшом промежутке между изображением и надписью, когда подпись внизу, и я не вижу возможности устранить этот пробел.

JSBIN: jsbin

Вопрос:
Откуда возникает разрыв и как его удалить? Я пробовал все: от позиционирования до краха-обрушения до линейного роста, но не могу заставить его идти.