HTML 和 CSS 中基于网格的布局问题

Question

我最近一直在使用 Skeleton 和 Foundation 框架开发一个网站，并且运行进入了一些我无法理解的东西。图片展示了我的问题：

在图 2 中，您可以看到网站的外观：每张卡片应占据容器的三分之一。它在 safari、google chrome 和 opera 上按预期工作。但是在 firefox 和 internet explorer 浏览器上，我看到了图片编号 1。卡片的缩放比例很大。我post相关代码：

卡的div：

<div class="one-third column" >

<a href="$linkToEntry">
    <table class="justoKortele">
    <thead><tr><th>$entryName $discountPercent </th></tr></thead>
    <tbody>
    <tr data-equalizer-watch><td><img src="$entryImg"></td></tr>
    <tr><td><s>$oldPrice</s> &nbsp $newPrice</td></tr>
    </tbody>
    </table>
</a>

</div>

我对卡的自定义css：

.justoKortele{

  transition: all 0.3s ease-in-out;
  width: 100%;

}

.justoKortele:hover{

  transition: all 0.3s ease-out;
  transform: scale(1.03);

  box-shadow: 0 0 13px rgba(242,146,0,100);
  width:100%;

}

其他一切都使用基础框架中的样式。这里可能是什么问题？即使我设置宽度：10px；在 css 中，firefox 和 internet explorer 不关心并且仍然显示巨大的卡片。如果需要，我会提供更多信息，该网站目前在 http://www.balduterminalas.lt

上线

谢谢。

Answer 1

我看到的唯一问题是最大宽度：它在 firefox

中不起作用

改变这个：

img {
    max-width: 100%;
    height: auto;
}

至

img {
width: 100%;
height: auto;

}

HTML 和 CSS 中基于网格的布局问题

Problems with grid based layout in HTML and CSS

html

css

zurb-foundation