Difference in css-positioning in windows and linux_问答_开发者

Difference in css-positioning in windows and linux

开发者 https://www.devze.com 2022-12-27 05:44 出处：网络

I have a problem with rendering my html page by the same browsers in different OS. There are 3 spans and position of each span is corrected through css(position:relative).

相关专题：css

I have a problem with rendering my html page by the same browsers in different OS. There are 3 spans and position of each span is corrected through css(position:relative). But I have found out that the page that looks correct in firefox under Linux, shows not right at the same firefox(3.5.7) under Windows OS.

Linux(Left - How it should be)/Windows(right): link text

And the same with other browsers. What is the cause of this problem and how is possible to solve it. My code: 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" />
    <开发者_JAVA百科;/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;
}

You should use a CSS-reset, it will help standardize your css for better cross browser compatibility: http://developer.yahoo.com/yui/reset/

Also, you have this

html, body{
 font-family: Georgia;
}

I am guessing one of your OS does not have the Georgia font. Probably the Windows one.

It looks like the Linux version is not rendering the Georgia. According to the below sources, unless the distro has the MSFONTS, the CSS will fallback to the default serif font.

Utopia = Georgia (serif)

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

There is one more consideration. Georgia has an old convention of lower-case numbers. The baseline of the digits will vary wildly. For example, the visual baseline for 6 vs. 9 will be very different. You can use your CSS to position one digit, and the other digit will overlap.

My advice is to pick a different font for the large digits or change the design to be less tightly coupled. Georgia is very difficult, if not impossible, to vertically center.