如何在 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 ~ img）设置图像CSS，同时仍然能够通过简单地更改类将标题放置在图像上方或下方。

我

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

JSBIN： JSBIN

问题：
间隙从何而来，如何消除？我尝试了从定位到边框折叠到线高的所有方法，但无法实现。

Answer 1

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

然而，好消息是，它是可修复的（在您的用例中），在其他浏览器中没有副作用。

只需向 img 元素添加一个float:left;，如下所示：

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

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