Internet explorer div渲染不正确

下面是我正在制作的一个实践站点的一些代码。它运行良好，唯一的问题是表单和按钮之间没有填充，尽管我明确声明“padding top:50px；”。在IE 9中，如果启用了quirks模式，它会渲染填充，但是如果没有quirks模式，或者使用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>

我认为问题在于缩略图div没有指定的高度。缩略图中包含的div是浮动的，因此它们的高度不会计算为父div的最终高度。结果是缩略图的高度为0，因此submit div calculate从顶部页面开始填充顶部；但是图像的高度是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;">



因此，我立即看到了边距和填充。
请不要使用echo编写HTML代码：所有这些转义都是不可读的，更容易出错。您可以关闭php标记，执行HTML，然后重新打开php:
while（某物）{？>我的HTML不，我还没有使用任何外部css。我只是在尝试练习PHP和MySQL，但这种填充的东西真的让我很恼火。你是在使用样式表还是所有样式都是内联应用的？我问的原因是，如果能看到所有样式都应用到上面显示的元素上，那会很好：缩略图、表单、提交等等。这就是d是的，非常感谢，先生。