使用基金会计算不一致图像大小的浏览器

Question

如所附图片所示，三个浏览器呈现相同的内容非常不同的。

ChromeVersion24.0.1312.57(底部)正在缩小图像，并且比两个版本要小得多。令人惊讶的是，Chrome只是重新调整图像大小，并创建了一个半空白的屏幕，尽管一个粘稠的导航条填充了整个屏幕(就像底部的背景图像一样)。

Safari 5.1.10 (6534.59.10) (中间)处理较小的视口，但按排序顺序，以较小的视口计算新图像大小，甚至比Chrome还要小。

Firefox29.0.1由于视口大小而退化得很好，但是没有重新计算图像。

Am使用Foundation (缩小文件)版本5

源HTML

<div class="row">
    <table cellpadding='0' cellspacing='0' border='0' align='center'>
      <tr align='center'>
        <td class="modelloframe">
            <div id="thumbwrapper">
              <a href="/uploads/catalog/image/8/3210.jpg" rel="prettyPhoto[]" title="3210F - Women&#x27;s-T 80/20"><img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" /></a>
              <div class="text" id="thumbwrapper">3210F</div>
          </div>
        </td>

如何计算这些值如此巨大的不同？为什么Chrome表现得很奇怪

Answer 1

块网格确实提供了更好的响应结果。如果有人无意中发现这一点，请注意下载的版本。MIne没有为每个网格类型定义列表样式为“none”.

<div class="row">
      <ul class=small-block-grid-6>
             <li>...          </li>
      </ul>
</div> 

Answer 2

如果您使用的是基金会，您将需要遵循他们的结构。声明行后，需要声明网格/列。让您的网格成为父容器，您不应该需要处理表的位置或宽度。

<div class="row">
  <div class="large-12 columns">
    <table cellpadding='0' cellspacing='0' border='0' align='center'>
      <tr align='center'>
        <td class="modelloframe">
          <div id="thumbwrapper">
            <a href="/uploads/catalog/image/8/3210.jpg" rel="prettyPhoto[]" title="3210F - Women&#x27;s-T 80/20"><img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" /></a>
            <div class="text" id="thumbwrapper">3210F</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

列/..columns类包含维护水平块(行)所需的浮点数等。

块网格也是一个很好的资源，但是如果您不在列中声明它们，您将无法实现您想要的结果。