28172 sujets

CSS et mise en forme, CSS3

Width arrondi sur Safari et Opera

Bonjour à tous,

Je suis en train de designer un menu et je m'aperçois qu'il y a un problème sous Safari et Opera.

Voici mon code :

<ul id="main-nav">
    <li class="first"><a href="#">Actualités</a></li>
    <li><a href="#">Ecoles</a></li>
    <li><a href="#">Formations</a></li>
    <li><a href="#">Admissions</a></li>
    <li><a href="#">Enseignants</a></li>
    <li><a href="#">Métiers</a></li>
    <li><a href="#">Partenaires</a></li>
    <li class="last"><a href="#">Contact</a></li>
</ul>




#main-nav {
  width: 955px;
  height: 25px;
  overflow: hidden;
  background: #FF0000;
}
#main-nav li {
  float: left;
  width: 118.5px;
  height: 25px;
  border-right: 1px solid #000;
}
#main-nav li.last {
  border-right: 0;
}


Le but est donc d'avoir un menu de 955px avec des tailles de <li> égales.
Sous Firefox et IE aucun problème, les <li> remplissent bien tout le <ul>.
Par contre sous Safari et IE, j'ai l'impression que la taille des <li> et arrondi au chiffre en dessous et ne prend pas en compte le 0.5px.

Est-ce que quelqu'un à déjà été confronté à ce problème ?
Agylus a écrit :
Salut,

Parce que tu crois qu'il est vraiment possible d'avoir des demis-pixels ? Smiley eek


Sur Firefox et IE, ils sont pris en compte... pourquoi pas sur Safari et Opera ?
Bonjour,

Il est en effet impossible d'avoir un demi pixel (les pixels étant l'unité la plus petite sur l'écran). Face à 118.5px c'est au navigateurs de se débrouiller, et donc à eux de choisir comment ils vont faire l'arrondi.

Jukaori a écrit :
Sur Firefox et IE, ils sont pris en compte... pourquoi pas sur Safari et Opera ?
Non, sur FF et IE, l'arrondi qui est effectué correspond à ce que tu attends c'est tout.
Modifié par Laurie-Anne (24 Aug 2009 - 11:59)
Laurie-Anne a écrit :
Non, sur FF et IE, l'arrondi qui est effectué correspond à ce que tu attends c'est tout.

Subtilité dans la subtilité: Firefox arrive à gérer des tailles en fraction de pixels dans certains cas. Par exemple:
- un padding de 0.1px sera invisible (arrondi à 0px), mais le padding étant non-nul il permet par exemple de bloquer la fusion des marges;
- avec certains systèmes d'exploitation et modes de lissage des fontes, les tailles de texte intermédiaires (font-size: 13.7px; par exemple, ou une valeur en EM qui ne tombe pas rond...) sont correctement appliquées.

Ça concerne uniquement Firefox pour le premier point, et Firefox et certains autres navigateurs pour le deuxième point.
Sujet clos
Aller à