在Windows和Linux中的css定位的差異

我在不同的操作系統中使用相同的瀏覽器呈現我的html頁面時出現問題。有3個跨度，每個跨度的位置通過css（position：relative）更正。但我發現，在Linux下firefox看起來正確的頁面，在Windows操作系統下的相同firefox（3.5.7）中顯示不正確。在Windows和Linux中的css定位的差異

的Linux（左 - 應該如何）/ Windows的（右）：link text

，並與其他瀏覽器一樣。這個問題的原因是什麼以及如何解決這個問題。我的代碼： 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; 
}

來源

2010-04-13 andrii

你應該使用一個CSS復位，它有利於規範你的CSS更好的跨瀏覽器兼容：http://developer.yahoo.com/yui/reset/

此外，你有這個

html, body{ 
font-family: Georgia; 
}

我猜你的一個操作系統沒有格魯吉亞字體。可能是Windows的一個。

來源

2010-04-13 14:48:27 vinhboy

因爲你的答案有助於識別字體問題，所以你只能得到一個用於提示CSS重置錘子的-1。 – ANeves 2010-04-13 15:13:13

謝謝！你是對的！在我的linux系統中沒有格魯吉亞字體！ – andrii 2010-04-13 17:15:48

它看起來像Linux版本不渲染格魯吉亞。根據以下來源，除非發行版有MSFONTS，否則CSS將回退到缺省襯線字體。

烏托邦=喬治亞（襯線）

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

還有一個考慮因素。格魯吉亞有一箇舊約的小數字。數字的基線會有很大的不同。例如，6與9的視覺基線將會非常不同。您可以使用CSS定位一個數字，而另一個數字將重疊。

我的建議是爲大數字選擇不同的字體或將設計更改得更緊密。格魯吉亞即使不是不可能，也很難以垂直居中。

來源

2010-04-13 14:55:52

謝謝你的建議！我會嘗試使用另一種字體的數字！ – andrii 2010-04-13 17:18:18

在Windows和Linux中的css定位的差異

回答

相關問題