Question

经过多次考虑后我刚刚切换到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类，那就没关系了。

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

Answer 1

我一直在使用默认的CSS（v4.3.1）而不是SASS同样的问题。仅限于我，它仅在IE 10/9中出现。在比较用于文档的样式表和下载中包含的样式表时，我发现了一个区别。

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

max-width: 100%;

Answer 2

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

你使用sass还是只是在他们的CSS上工作？

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

2 个答案: