我在不同操作系统的同一浏览器中渲染HTML页面时遇到了问题。
有三个元素,每个元素的位置都是通过CSS(position:relative)进行校正的。
但是我发现,在Linux下的Firefox浏览器中看起来正确的页面,在Windows OS下的同一Firefox(3.5.7)浏览器中显示不正确。
Linux(左侧-应该如何显示)/ Windows(右侧):链接文本 其他浏览器也是如此。这个问题的原因是什么,如何解决。 我的代码: question.html:
Linux(左侧-应该如何显示)/ Windows(右侧):链接文本 其他浏览器也是如此。这个问题的原因是什么,如何解决。 我的代码: question.html:
<!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>Question</title>
<link href="css/question.css" rel="stylesheet" media="all" />
</head>
<body>
<div class="eventFullDate">
<span class="eventYear">2010</span>
<span class="eventDate">17</span>
<span class="eventMonth">FEB</span>
</div>
</body>
</html>
question.css:
html, body{
font-family: Georgia;
}
div.eventFullDate{
height: 39px;
width: 31px;
float: left;
border: 1px solid;
border-color: #E3E3E3;
background-color: #F7FFFF;
}
span.eventYear, span.eventDate, span.eventMonth{
color: #EC5C1D;
position: relative;
width: 100%;
}
span.eventYear{
left: 1px;
bottom: 3px;
font-size: 0.8em;
}
span.eventDate{
left: 5px;
bottom: 12px;
font-size: 1.3em;
}
span.eventMonth{
left: 3px;
bottom: 15px;
font-size: 0.8em;
}