Question

在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）之间存在一些空间

Answer 1

我在FF 3.6.13，IE7-8中测试了你的代码。我在IE中的怪癖模式中观察到了这个问题，这可能意味着你要么没有使用Doctype declration，要么在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声明的列表。

Answer 2

height:24%;

使用百分比值的任何理由？

无论如何，我认为这可能是Quirks Mode。尝试在文档开头添加<!DOCTYPE html>以查看它是否有帮助。

Answer 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下落不明），您将在发现问题时有了更好的改变。

P.S。使用百分比时要格外小心 - 像填充这样会使百分比值复合，从而导致过剩。我实际上不确定你的border : 1化合物是否100％（导致100％+ 1px），但只是一个有用的提醒。

Answer 4

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

margin-top:10px\9;

这将仅针对IE8及以下版本。更改像素数量直到它看起来不错。

Answer 5

将height=100%添加到<table>并且有效。谢谢大家的建议:)

保证金在IE和Mozilla中的显示方式不同

5 个答案: