2
下面是顯示我的問題的簡化代碼片段。使用位置:相對和頂部/邊緣頂部的Firefox 4渲染差異?
我有一個包含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>
感謝您的評論。但是我的意思是FF4的距離與其他瀏覽器的不同。在檢查示例或實例時,您會注意到底部框的紅色邊框與boxwrap的底部邊框對齊。在其他瀏覽器中間還有一點空間。我想要確切數量的空間像素,但firefox會降低它,我不確定爲什麼或如何使其與其他瀏覽器/版本相同 – Steven 2011-05-28 00:39:08
沒有人對此有解釋嗎?我想我現在會用桌子替換它。 – Steven 2011-06-01 07:30:27