html - CSS Margin Top 在 IE 8 上无法正常工作

Question

我通过几个链接解决了这个问题，但没有一个修复对我有用。
我使用了填充，但仍然得到相同的结果。
我使用了 position: relative，仍然是相同的结果等等。

我有一个如下所示的 CSS:

.ItemsStyle
{
    margin-top: 5px;
    margin-bottom: 5px; 
    width: 720px;
}

我的 div 如下所示:

<div id="Items" class="ItemsStyle">
                            <!--Work Here... -->
</div>

我在这个 div 上方有一个文本框，看起来像:

<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>  

现在，我希望我的文本框和我的 div 之间有 5px 的边距。 CSS 在 IE 11 上运行良好，边距也很好。
但是，当我在 IE 8 上运行我的应用程序时，边距更多，当我需要 5px 时，文本框向下 30px。

我已经尝试并测试了其他类似帖子中建议的所有方法，但我得到了相同的结果。

Answer 1

我尝试使用以下代码在虚拟机上复制它，但无法:

<style type="text/css">
.ItemsStyle{
    margin-top: 5px;
    margin-bottom: 5px; 
    width: 720px;
    background:#f00;
    height:200px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>  
<div id="Items" class="ItemsStyle">
    <!--Work Here... -->
</div>

尽管如此，您可以只在输入上使用 margin-bottom 而不是在 div 上使用 margin-top。你应该得到你正在寻找的结果:

<style type="text/css">
.ItemsStyle{
    margin-bottom: 5px; 
    width: 720px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana; margin-bottom:5px;"/>  
<div id="Items" class="ItemsStyle">
    <!--Work Here... -->
</div>

作为文档的一般“流程”，我尝试将所有内容向下(即边距底部、填充底部)推到页面而不是向上(即边缘顶部、填充顶部)