Firefox 4使用position：relative和top / margin-top呈现差异吗？

问题描述

| 以下是显示我的问题的简化代码段。我有一个装有3条信息的盒子，应该正确地将它们排成一行，但是显然在FireFox 4中，该信息应排在下面。这种差异来自何处，我该如何解决？我是否使用了错误的方法来显示信息？我在div周围放置了红色边框，以便您可以更好地对其进行可视化。您可以在这里看到它：http://www.sharpsignal.com/test.html 编辑：澄清一下：在FF4中，底部红色框与boxwrap框对齐，在其他浏览器中，2之间仍然有空间，为什么FF4会将此呈现为不同，我如何解决它，使其在所有浏览器中都相同？

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" 

\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Test</title>

<style type=\"text/css\">

.boxwrap{
    border: 1px solid #666;
    width:120px;
    height:54px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    color:#444;
}

.boxcontenttop{
    position:relative;
    left:10px;
    top:4px;
    font-size:9px;
    text-align:left;
    border:1px solid #DD0000;
}

.boxcontentmain{
    position:relative;
    right:10px;
    top:5px;
    text-align:right;
    font-size:13px;
    font-weight:bold;
    border:1px solid #DD0000;
}

.boxcontentextra{
    margin-top: 7px;
    text-align: center;
    color:#888;
    font-size:10px;
    border:1px solid #DD0000;
}

</style>

</head>

<body>

<div class=\"boxwrap\">
    <div class=\"boxcontenttop\">top info</div>
    <div class=\"boxcontentmain\">Main content</div>
    <div class=\"boxcontentextra\">Extra Info</div>
</div>

</body>
</html>

解决方法

使用left和right会使它们在框中移动。带有红色框对齐的实时演示。如果要垂直对齐，则需要根据距顶部的偏移均匀地放置值。现场演示

firefox margin-top position relative top 使用使用使用呈现差异差异

Firefox 4使用position：relative和top / margin-top呈现差异吗？

问题描述

解决方法

相关问答