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 は次のとおりです。サファリでページを更新すると、ページが変更されることに注意してください。変！

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

まず、27行目と32行目で、閉じ引用符が2倍になっています。width="100%"2番目-最初の2つの画像、 3番目と4番目の画像を宣言width="46px"します。これが、あなたの質問に対する正しい答えだと思います。

于 2013-03-15T15:31:14.150 に答える
1 
<div class="blog-image" id="blog-image-"
  style="border-style:solid; border-width:1px; border-color:#8AAEA4;"">

id="blog-image-他の出現の場合のように、後にハッシュ値(?)がないのはなぜですか? (これにより、その ID が 2 回使用されるため、コードが無効になります。)

属性値""の末尾にある は何ですか?style

于 2013-03-15T15:30:06.787 に答える