边距在 IE 和 Mozilla 中显示不同答案

【问题标题】：Margin displayed differently in IE and Mozilla边距在 IE 和 Mozilla 中显示不同
【发布时间】：2011-05-06 17:38:02
【问题描述】：

边距在 IE 和 Mozilla 中的处理方式不同吗？因为当我尝试 Mozilla 3.6 正确显示边距但 IE 8 将其拉伸得太远时。
这是我的代码

<div id="searchCriteria">  
<table width="100%" border="1"  bordercolor="#64A4F5">       
</table>
</div>  
<div id="searchResult">
</div>

这是我的 CSS

#searchCriteria{  
        height:24%;  
        width:100%;  
        float: right;  
        display: block;  
        font-family:  
        verdana,arial;  
        font-size: 12px;
}

#searchResult{  
        height:70%;  
        width:100%;  
        float:right;  
        display:block;  
        margin-top:15px;  
        margin-bottom:5px; 
}

searchCriteria 和 searchResult div 之间的边距在 IE 中被拉长，但在 Mozilla 中工作正常。
（看起来在 IE 中，table 元素和searchCriteria div 之间有一些空间）

【问题讨论】：

顺便说一下，这是 Verdana，而不是 Vardana :-)
已将 height=100% 添加到 <table> 并且有效:)

标签： html css internet-explorer mozilla

【解决方案1】：

我在 FF 3.6.13、IE7-8 中测试了您的代码。我仅在 IE 的 quirks 模式下观察到该问题，这可能意味着您要么没有使用 Doctype 声明，要么在 quirks 模式下使用 IE。如果您使用的是 XHTML，请使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
</head>

<body>

     <p>… Your HTML content here …</p>

</body>
</html>

如果您使用的是 HTML5，请使用：

<!DOCTYPE html>

请参阅this 了解要使用的其他 Doctype 声明列表。

【讨论】：

它就在那里。我已经添加了<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 仍然没有运气。
我在 searchResult div 中使用 DHTMLX 网格组件。
在 IE 中，表格元素和 searchCriteria div 之间似乎有一些空间。而在 IE 中 searchCriteria 和 searchresult 之间的边距很好。

【解决方案2】：

height:24%;

有什么理由使用百分比值吗？

不管怎样，我想大概是Quirks Mode。尝试在文档开头添加<!DOCTYPE html> 看看是否有帮助。

【讨论】：

在标准模式下没有。我已经加了<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【解决方案3】：

您是否正在使用样式表重置？浏览器继承的边距可能与您的设计冲突。

例如。

div, table, td, th, tr, {
   margin : 0;
   padding : 0;
   border : 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

这里是更广泛的CSS reset的链接

使用开发人员工具（IE 中的 F12 和 Firefox 中的 Firebug 扩展）来解决设计中的差异也可能会有所帮助 - 如果您收集特定信息（例如，有 4px 下落不明），您将在发现问题方面有更好的变化。

附：使用百分比时要格外小心——像填充之类的东西会复合百分比值，导致超额。我实际上不确定您的 border : 1 是否具有 100%（导致 100% + 1px）的复合物，但只是一个有用的提醒。

【讨论】：

【解决方案4】：

向您的 searchResult div 添加第二个 margin-top 声明，如下所示：

margin-top:10px\9;

这将仅针对 IE8 及以下版本。更改像素数量，直到您觉得合适为止。

【讨论】：

【解决方案5】：

将height=100% 添加到<table> 并且可以正常工作。谢谢大家的建议:)

【讨论】：