1

我在一个 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 小提琴在这里

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

4

3 回答 3

2

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

于 2013-03-15T15:34:42.323 回答
1 
<div class="blog-image" id="blog-image-"
  style="border-style:solid; border-width:1px; border-color:#8AAEA4;"">

id="blog-image-为什么在其他事件之后没有哈希值（？） ？（这会使您的代码无效，因为该 id 被使​​用了两次。）

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

于 2013-03-15T15:30:06.787 回答
1

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

于 2013-03-15T15:31:14.150 回答