css - Zurb Foundation "th" block 网格内的缩略图无响应

Question

经过深思熟虑(从 Twitter Boostrap 3 RC1 切换)，我刚刚切换到 ZURB Foundation 4，大部分情况都很好，但我担心我可能已经遇到了一些错误——但错误可能是也许我正在使用它？

基本上，我正在设置一个 block 网格，其中包含一系列图像。最初它按预期工作:图像自动缩放到其列的宽度，这是有意义的，因为它们具有 max-width:100% 和 height:auto。

现在，当我将 class="th" 添加到图像的每个 anchor 时，图像突然溢出它们的容器并且根本不受大小限制，而是图像文件本身的尺寸.

在 Firefox 中对此进行检查，我发现可能导致此问题的唯一区别是 th 类具有 line-height:0。我对所有这些东西有些陌生，所以我不太明白为什么他们将行高设置为零，但据我所知，这就是破坏我使用的一切的原因。这是一个错误还是我遗漏了什么？

这是一个代码示例:

<ul class="large-block-grid-4">
   <li>
      <a class="th" href="http://placehold.it/800x800.jpg">
         <img src="http://placehold.it/800x800.jpg" />
      </a>
   </li>
</ul>

即它到处溢出，但如果我只是删除 th 类，就没问题了。

对我来说它看起来像是一个错误，但在我提交它之前我想确保我不是一个白痴并且遗漏了一些重要的点。

Answer 1

我一直只使用默认的 CSS (v4.3.1) 而不是 SASS 来解决同样的问题。仅对我而言，它仅发生在 IE 10/9 中。在比较文档使用的样式表和下载中包含的样式表时，我发现了一个不同之处。

将以下内容添加到“a.th”样式中:

max-width: 100%;