块网格内的Zurb Foundation“th”缩略图无响应答案

【问题标题】：Zurb Foundation "th" thumbnail images within block grid unresponsive块网格内的Zurb Foundation“th”缩略图无响应
【发布时间】：2013-08-06 19:07:33
【问题描述】：

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

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

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

在 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 类，就可以了。

这对我来说似乎是一个错误，但在我提交它之前，我想确保我不是白痴并且错过了一些重要的点。

【问题讨论】：

标签： css zurb-foundation

【解决方案1】：

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

将以下内容添加到 'a.th' 样式中：

max-width: 100%;

【讨论】：

我报告了这个错误，但他们甚至还没有回复。基于此，我将框架切换回 Bootstrap（然后决定只编写自己的框架，因为无论如何我只需要一些功能），尽管我更喜欢 Foundation 的设计。对于应该能够在主要商业网站上使用的东西，在 13 天后没有得到对错误报告的回复似乎是不可原谅的。
感谢您的提示。我用 codepen 验证了该修复程序：cdpn.io/gJBtv。我会将其标记为正确答案，因为（1）它是由验证此错误的存在的人所证实的，并且与我的使用无关，并且（2）它提供了一个修复——尽管我并没有那么在寻找那个。
请注意，该错误已在基础上得到响应并关闭，因为他们说“它不应该用于锚元素，而是 img 元素”......这与他们的文档所说的相反.我提醒他们，他们的文档专门将其称为“a.th”，但他们从未回复或更新他们的文档。

【解决方案2】：

它不应该溢出。 http://foundation.zurb.com/docs/components/thumbnails.html

你是在使用 sass 还是仅仅在他们的 css 之上工作？

【讨论】：

萨斯。我使用指南针创建了项目。我不太明白是否使用 sass 会有什么不同，但我想我可以运行一个快速测试，看看它是否在直接链接到他们的分布式 css 文件时发生。