在Windows和Linux中CSS定位的差异

3
我在不同操作系统的同一浏览器中渲染HTML页面时遇到了问题。 有三个元素,每个元素的位置都是通过CSS(position:relative)进行校正的。 但是我发现,在Linux下的Firefox浏览器中看起来正确的页面,在Windows OS下的同一Firefox(3.5.7)浏览器中显示不正确。
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;
}
2个回答

2

您应该使用CSS重置,它将有助于标准化您的CSS以实现更好的跨浏览器兼容性:http://developer.yahoo.com/yui/reset/

此外,您还有以下内容:

html, body{
 font-family: Georgia;
}

我猜您的一个操作系统没有Georgia字体,可能是Windows系统。

你并没有因为建议使用CSS重置工具而被扣除分数,因为你的回答有帮助地指出了字体问题。 - ANeves
谢谢!你是对的!我的Linux系统中没有Georgia字体! - andrii

2
看起来Linux版本无法渲染Georgia字体。根据以下来源,除非发行版有MSFONTS,否则CSS将回退到默认的衬线字体。

乌托邦 = Georgia(衬线)

http://andrew.triumf.ca/fonts/fonts.html
http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/

还有一个问题需要考虑。乔治亚州有一种使用小写数字的传统。数字的基线会变化很大。例如,数字6和9的视觉基线会非常不同。您可以使用CSS来定位一个数字,另一个数字将重叠。
我的建议是为大数字选择不同的字体或改变设计,使其耦合度更低。乔治亚字体非常难以垂直居中,甚至可能不可能实现。

谢谢您的建议!我会尝试使用另一种数字字体! - andrii

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接