0

これは、私が作成している練習サイトのコードです。それは問題なく動作します。唯一のことは、「padding-top: 50px;」と明示的に述べているにもかかわらず、フォームとボタンの間にパディングがないことです。互換モードをオンにした IE 9 では、パディングがレンダリングされますが、互換モードがない場合、または Firefox (14) を使用している場合、パディングはありません。

<form action="action.php" method="post">
<div id="thumbails" class="thumbnails">
    <?php
        $query="SELECT page_title, page_thumb FROM `pages` WHERE page_thumb != ''";
        if($result = $mysqli->query($query))
        {
            $i = 1;
            while($row = $result->fetch_assoc())
            {?>
                <div id="container<?php echo $i?>" class="container" style="width:25%; float:left;">
                <img src="<?php echo $row[page_thumb]?>" height=220 width=200 />
                <input class="cbox" type="checkbox" name="pages[]" value="<?php echo $row[page_title]?>"/>
                </div>
            <?php
                $i++;
            }
        }
    ?>
</div>
<div id="submit" class="submit"  style="padding-top:50px;text-align:center;">
    <input type="submit"/>
</div>
</form>

Firebug を使用して検査すると、送信を含む div が送信ボタンだけでなくフォーム全体をカバーしていることがわかります。IE 開発者モードでは、互換モードがオンになっていない限り同じことです。その場合、希望どおりにレンダリングされます。でも癖が見当たりません！このコードの何が問題になっていますか?

4

1 に答える 1

1

問題は、サムネイルdiv の高さが指定されていないことだと思います。サムネイルに含まれる div はフローティングであるため、それらの高さは親 div の最終的な高さに対して計算されません。その結果、サムネイルの高さは 0 になるため、submit divの計算はトップ ページからpadding-topになります。ただし、画像の高さは 200px なので、入力は押し下げられます。試してみると：

<div id="thumbails" class="thumbnails" style="height:300px;">

あなたが望むものを見るでしょう。この問題を見つけるために、通常、div の周りに境界線を置きます。

<div id="thumbails" class="thumbnails" style="height:300px; border:1px solid red;">
<div id="submit" class="submit"  style="padding-top:50px;text-align:center;border:1px solid green;">

したがって、マージンとパディングがすぐに表示されます。

于 2012-08-16T10:44:16.407 に答える