Question

以下是我正在制作的练习网站的一些代码。它运行正常，唯一的是表单和按钮之间没有填充，尽管我明确说明“填充顶部：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开发人员模式中，除非打开quirks模式，否则它会发生同样的事情，在这种情况下它会呈现我想要的方式。但我没有看到任何怪癖！这段代码有什么问题？

Answer 1

我认为问题是缩略图 div没有指定的高度。包含在缩略图中的div是浮动的，因此它们的高度不是根据父div的最终高度计算的。结果是缩略图'高度为0，因此提交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;">

所以我立即看到了边距和填充。

Div未正确渲染

1 个答案: