Question

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

这在mozilla和chrome中完美无缺，但在safari中却不行：

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

Normal Output

如您所见，图像的大小与td单元格相同。

但有时当我刷新页面时，这就是生成的内容：

Wrong Output

在我的代码中，我做了一个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

任何人都可以告诉我为什么图像会这样做吗？解决方案是停止在页面上显示小图像。

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"，我想这是你问题的正确答案。

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

3 个答案: