表格大小错误，Safari 浏览器中的图像答案

【问题标题】：Image Within Table Size Error, Safari Browser表格大小错误，Safari 浏览器中的图像
【发布时间】：2013-03-04 09:12:04
【问题描述】：

我在一个 div 中生成一个图像表。

这在 mozilla 和 chrome 中运行得非常好，但在 safari 中却不行：

这是 Safari 中有时输出的样子，即取决于刷新：

如您所见，图像被放置到 td 单元格的大小。

但有时当我刷新页面时，会生成以下内容：

在我的代码中，我对帖子中有多少张图片进行了 for 循环。

代码如下：

<table style="margin-top:2px; width:100%;">
    <tr>
        <td colspan="4" style="text-align:center; padding: 2px 2px 2px 2px;">
            <div class="blog-image" id="blog-image-419d6830569939e69a4e827a437af00b711b85cc" style="border-style:solid; border-width:1px; border-color:#8AAEA4;" data-keywords="">
                <a data-target="flare" href="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" data-flare-scale="fit">
                    <img style="display: block;" width="100%" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="butterbean stew.jpg"/>
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td style="padding: 2px 2px 2px 2px;">
            <div class="blog-image" id="blog-image-99c01d06fa65c7879df3f1db0520c98678af7577"  style="border-style:solid; border-width:1px; border-color:#8AAEA4;" data-keywords="">
            <a data-target="flare" href="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" data-flare-scale="fit">
                <img style="display: block;" width="100%" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="welsh rarebit.jpg"/>
            </a>
            </div>
        </td>

        <td style="padding: 2px 2px 2px 2px;">
            <div class="blog-image" id="blog-image-c77d52058e55fc9dfa0520b9f786d8f5ff718074"  style="border-style:solid; border-width:1px; border-color:#8AAEA4;" data-keywords="">
                <a data-target="flare" href="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" data-flare-scale="fit">
                    <img style="display: block;" width="100%" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="blackboard.jpg"/></a>
            </div>
        </td>
        <td style="padding: 2px 2px 2px 2px;">
            <div class="blog-image" id="blog-image-"  style="border-style:solid; border-width:1px; border-color:#8AAEA4;"">
                    <img style="display: block;" width="46px" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="" />
            </div>
        </td>
        <td style="padding: 2px 2px 2px 2px;">
            <div class="blog-image" id="blog-image-"  style="border-style:solid; border-width:1px; border-color:#8AAEA4;"">
                <img style="display: block;" width="46px" src="http://i.telegraph.co.uk/multimedia/archive/02372/google-pipes-3_2372325k.jpg" alt="" />
            </div>
        </td>
    </tr>
</table>

这里是相关的 JS Fiddle，请注意，如果你在 safari 中刷新页面，它会改变吗？！奇怪！

JS FIDDLE HERE

谁能告诉我为什么这些图片会这样？解决此问题的方法是阻止图像在页面上显示得太小。

【问题讨论】：

标签： css image safari html-table

【解决方案1】：

你的 HTML 很乱。主要问题是您没有设置表格单元格的宽度。使用一段 CSS 的小固定版本：

.thumbs td {
    padding: 2px;
    width: 25%; // <-- force td to be equal size
}
.thumbs td img {
    width: 100%;
}

http://jsfiddle.net/naJ46/2/

建议：切勿在 HTML 中使用内联 CSS，这是非常糟糕的做法。事实上，致命的罪过之一。

【讨论】：

非常感谢，真的很有帮助，是的，我打算停止做内联 css，我不喜欢它：D 声誉++

【解决方案2】：

首先，在第 27 行和第 32 行，你有双引号。第二 - 你为前两张图片声明width="100%"，为第三张和第四张图片声明width="46px"，我猜这就是你问题的正确答案。

【讨论】：

谢谢，我删除了与我的 php 中的 if 语句有关的引号

【解决方案3】：

<div class="blog-image" id="blog-image-"
  style="border-style:solid; border-width:1px; border-color:#8AAEA4;"">

为什么id="blog-image- 之后没有哈希值（？），就像其他情况一样？（这会使您的代码无效，因为该 id 被使用了两次。）

style 属性值末尾的 "" 是什么意思？

【讨论】：