使用 Foundation 计算图像大小不一致的浏览器答案

【问题标题】：Browser computing image sizes inconsistent using Foundation使用 Foundation 计算图像大小不一致的浏览器
【发布时间】：2014-07-25 09:09:07
【问题描述】：

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

Chrome 版本 24.0.1312.57（底部）正在折叠图像，并且计算的尺寸明显小于 2 个对应版本。令人惊奇的是，Chrome 只是重新调整图像大小并创建了一个半空白屏幕，尽管粘性导航栏填满了整个屏幕（底部背景图像也是如此）

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

Firefox 29.0.1 会根据视口大小很好地降级，但不会不重新计算图像。我正在使用 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 的行为真的很奇怪

【问题讨论】：

可能是因为表格中没有宽度。设置表格的宽度。
不...那里有一个 width='100%' ，结果是一样的。 Chrome 已将表格缩小到 402px 的宽度
嗯...好的...在基础上，您必须在
之后放置另一个 div，例如
。这个 div 定义了你想要在响应式设计中使用哪种类型的块。
同时我建议使用块网格基础而不是使用表格标记 - foundation.zurb.com/docs/components/block_grid.html
是的，也有。没有骰子……没有行为改变。确凿的证据是“为什么一个浏览器的行为与其他两个浏览器的行为如此不同？基本上 Firefox 是正确的恕我直言

<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'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>