Ниже приведен упрощенный фрагмент кода, который показывает мою проблему.
У меня есть окно с 3 частями информации, и они должны быть выстроены правильно, но, по-видимому, в FireFox 4 информация выстроена ниже, что должно быть. Откуда эта разница и как мне ее решить? Возможно, я использую неправильные методы для отображения информации?
Я поместил красные рамки вокруг элементов, чтобы вы могли лучше их визуализировать.
Вы можете увидеть это здесь: http://www.sharpsignal.com/test.html
РЕДАКТИРОВАТЬ: Чтобы уточнить: в FF4 нижний красный прямоугольник совпадает с прямоугольником, в других браузерах все еще остается пространство между двумя, почему 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>