Question

以下是显示我的问题的简化代码段。

我有一个包含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>

Answer 1

使用left和right会导致他们在框中移动。

Live demo红色框对齐。

如果想要垂直对齐，则需要根据顶部偏移量均匀定位值。 Live demo

Firefox 4渲染差异使用位置：relative和top / margin-top？

1 个答案: