Safari浏览器表内图像大小错误

Question

我在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文件，请注意，如果你在safari中刷新页面，它会发生变化吗？！太奇怪了！

JS FIDDLE HERE

有没有人能告诉我为什么这些图片要这么做？解决这个问题的办法是让图片在页面上看起来不那么小。

Answer 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，这是非常糟糕的做法。事实上，其中一个致命的罪过。

Answer 2

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

为什么没有哈希值(？)在id="blog-image-之后，与其他实例一样吗？(这会使您的代码无效，因为该id会被使用两次。)

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

Answer 3

首先，在第27行和第32行，您使用了两个右引号。第二，你为前两张图片声明width="100%"，为第三张和第四张图片声明width="46px"，我想这就是你问题的正确答案。