Les décimales d'une largeur CSS sont-elles respectées?

Question

Quelque chose que je me suis demandé pendant un moment tout en faisant du design CSS.

Les décimales dans les largeurs de css sont-elles respectées? Ou sont-ils arrondis?

 .percentage
{
    width: 49.5%;
}
 

ou

 .pixel
{
    width: 122.5px;
}
 

Answer 1

Si c'est un pourcentage de la largeur, alors oui, il est respecté. Comme Martin l'a souligné, les choses se briser quand vous arrivez à les fractions de pixels, mais si votre pourcentage de valeurs de rendement entier valeur de pixel (par exemple, 50,5% de 200px dans l'exemple), vous obtiendrez sensible, aux comportements attendus.

Edit: j'ai mis à jour l'exemple pour montrer ce qui se passe pour les fractions de pixels (en Chrome les valeurs sont tronqués, donc, 50, 50.5 et 50,6 montrent toutes la même largeur).

Answer 2

Même lorsque le nombre est arrondi lorsque la page est peint, la valeur totale est conservée en mémoire et utilisés pour enfant de calcul. Par exemple, si votre boîte de 100.4999 px peintures de 100px, c'est l'enfant avec une largeur de 50% sera calculé comme .5*100.4999 au lieu de 5*100. Et ainsi de suite pour les niveaux plus profonds.

J'ai créé profondément imbriqués présentation de la grille des systèmes où les parents largeurs des ems, et les enfants sont des pourcentages, et y compris jusqu'à quatre décimales en amont eu un impact notable.

Cas limite, bien sûr, mais quelque chose à garder à l'esprit.

Answer 3

Bien que les fractions de pixels peuvent apparaître à tour sur les différents éléments (comme @SkillDrick démontre très bien), il est important de savoir que les fractions de pixels sont effectivement respectés dans le modèle de boîte. Cela peut être mieux vu lorsque les éléments sont empilés à côté de (ou sur) les uns des autres; en d'autres termes, si j'étais à la place de 400 0.5 pixel divs côte à côte, ils ont la même largeur qu'un seul 200 pixels div. Si ils sont tous réellement arrondi à 1px (comme si l'on considère les éléments impliquerait) nous nous attendons à la 200px div être la moitié du temps.

Ceci peut être vu dans cette CSSDesk esquisse,

ou si vous souhaitez le tester sur les navigateurs plus anciens (qui ne sont pas pris en charge par CSSDesk), vous pouvez utiliser le balisage suivant/CSS:

HTML

<div class="div_house" id="small_divs">
  <p>0.5px div x 400</p>
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
  <p>200px div x 1</p>
  <div></div>
</div>

CSS

body
{
  color:            white;
  font-family:      Arial;
  font-size:        10px;
  font-weight:      bold;
  background-color: blue;
}

p
{
  padding:          0;
}

div.div_house
{
  background-color: grey;
  display:          inline-block;
  *display:         block;
  padding:          20px;
  margin:           10px;
  border-radius:    10px;
  border:           solid 5px white;
}

div.div_house div
{
  height:           10px;
  background-color: orange;
  display:          inline-block;
  *display:         block;
  *float:           left;
}

div#small_divs div
{
  width:            0.5px;
}

div#large_div div
{
  width:            200px;
}

Answer 4

La largeur sera arrondi à un nombre entier de pixels.

Je ne sais pas si tous les navigateur autour d'elle de la même manière. Ils semblent tous avoir une stratégie différente lors de l'arrondissement sub-pixel pourcentages. Si vous êtes intéressé par les détails de sous-pixel d'arrondi dans les différents navigateurs, il y a un excellent article sur ElastiCSS.

edit: j'ai testé @Skilldrick la démo dans certains navigateurs, pour l'amour de la curiosité. Lors de l'utilisation de fractions de pixels de valeurs (et non des pourcentages, ils travaillent comme suggéré dans l'article que j'ai mis en lien) IE9p7 et FF4b7 semblent ronde au pixel le plus proche, tandis que l'Opéra 11b, Chrome 9.0.587.0 et Safari 5.0.3 tronquer le nombre de décimales. Non pas que j'espérais qu'ils avaient quelque chose en commun, après tout...

Answer 5

Ils semblent d'arrondir les valeurs de l'entier le plus proche; mais Iam voir incohérence dans chrome,safari et firefox.

Pour l'e.g si de 33,3% convertit à 420.945 px

chrome et firexfox montrer que 421px. alors que safari affiche sa comme 420px.

Il semble que chrome et firefox suivez le plancher et le plafond de la logique, tandis que safari n'a pas. Cette page semble débattre du même problème

http://ejohn.org/blog/sub-pixel-problems-in-css/