Différence dans le positionnement de css dans Windows et Linux

J'ai un problème avec le rendu de ma page html par les mêmes navigateurs dans différents systèmes d'exploitation. Il y a 3 travées et la position de chaque travée est corrigée par css (position: relative). Mais j'ai découvert que la page qui semble correcte dans firefox sous Linux, montre pas exactement le même firefox (3.5.7) sous Windows OS.Différence dans le positionnement de css dans Windows et Linux

Linux (gauche - Comment ça devrait être)/Windows (à droite): link text

Et la même chose avec d'autres navigateurs. Quelle est la cause de ce problème et comment est-il possible de le résoudre. Mon 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" /> 
    </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; 
}

Source

2010-04-13 andrii

Vous devez utiliser un CSS-reset, il vous aidera à normaliser votre code CSS pour une meilleure compatibilité cross navigateur: http://developer.yahoo.com/yui/reset/

En outre, vous avez ce

html, body{ 
font-family: Georgia; 
}

Je suppose que l'un de vos OS n'a pas la police Georgia. Probablement le Windows.

Source

2010-04-13 14:48:27 vinhboy

Vous ne disposez que d'un -1 pour suggérer le marteau de réinitialisation CSS car votre réponse identifie le problème de police. – ANeves

Merci! Tu as raison! Il n'y a pas de police de Géorgie dans mon système Linux! – andrii

Il semble que la version Linux ne rend pas la Géorgie. Selon les sources ci-dessous, à moins que la distribution n'ait le MSFONTS, le CSS se repliera sur la police serif par défaut.

Utopia = Georgia (Serif)

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

Il y a une plus grande attention. La Géorgie a une vieille convention de nombres inférieurs. La ligne de base des chiffres varie énormément. Par exemple, la ligne de base visuelle pour 6 contre 9 sera très différente. Vous pouvez utiliser votre CSS pour positionner un chiffre, et l'autre chiffre se chevauchera.

Mon conseil est de choisir une police différente pour les grands chiffres ou de modifier la conception pour qu'elle soit moins étroitement couplée. La Géorgie est très difficile, voire impossible, à centrer verticalement.

Source

2010-04-13 14:55:52

Merci pour vos conseils! Je vais essayer d'utiliser une autre police pour les chiffres! – andrii

Différence dans le positionnement de css dans Windows et Linux

Répondre

Questions connexes