CSS Margin Top 在 IE 8 上无法正常工作答案

【问题标题】：CSS Margin Top not working properly on IE 8CSS Margin Top 在 IE 8 上无法正常工作
【发布时间】：2015-11-04 07:15:47
【问题描述】：

我浏览了几个链接来解决这个问题，但没有一个对我有用。
我使用了 Padding，但仍然得到相同的结果。
我用了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 之类的东西。

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

【问题讨论】：

标签： html css internet-explorer internet-explorer-8

【解决方案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>

作为文档的一般“流程”，我尝试将所有内容向下（即 margin-bottom、padding-bottom）推送到页面而不是向上（即 margin-top、padding-top）

【讨论】：

感谢塞缪尔的回复。我尝试了这个解决方案，但它没有做任何事情。是一样的。

【解决方案2】：

Internet explorer 8 对任何开发人员来说都是一个令人头疼的问题。试试这个代码：

    .ItemsStyle
{
    margin: 5px auto;
    width: 720px;
}

【讨论】：

感谢 Luna 的回复，但这似乎将整个 div 向右移动，并且边距是一样的。