html - 在 Firefox 中使用 CSS3 table-row/header/footer-group 时如何消除元素之间的间隙？

Question

我有两个元素 A、B，我想仅使用 CSS 定位 AB 或 BA。

我最终使用了 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; }

通过将 span 放在图像之前，我可以根据 span (span ~ img) 设置图像 CSS，同时仍然可以通过简单地更改类将标题放在图像上方或下方.

我唯一的问题是当标题位于底部时图像和标题之间有一个小间隙，我找不到消除这个间隙的方法。

JSBIN:jsbin

问题:
差距从何而来，我该如何消除它？我尝试了从定位到边框折叠再到行高的所有方法，但无法实现。

Answer 1

有时 Firefox 会做一些让我困惑数周的事情，
这似乎是其中之一。

不过好消息是，它是可修复的(在您的用例中)，在其他浏览器中没有副作用。

只需将 float:left; 添加到 img 元素，如:

li a > img { display: table-row-group; float:left; }

这似乎摆脱了不需要的空间。