Pourcentages Largeurs & 1px Bordures

Question

J'ai remarqué dans les deux versions actuelles de Safari et Chrome que lorsque je crée des éléments côte à côte, arrondis à un entier de 100%, je reçois une petite bordure de pixels (depuis que je suis ne pas utiliser un fond blanc pour les éléments/divs) qui redimensionne. J'ai l'impression de manquer simplement un attribut de position, mais je ne trouve aucune ressource sur el Google pour m'aider.

Un violon pour illustrer mon problème (OS X Safari & Chrome testé)

http://jsfiddle.net/shawnstrickland/HXyZ7/

Answer 1

Vous pouvez utiliser overflow:hidden;. écrire comme ceci:

nav { 
    float: left; 
    width: 25%; 
    background-color: blue; 
} 
article { 
    overflow:hidden; 
    background-color: red; 
} 

Cocher cette http://jsfiddle.net/HXyZ7/7/

Answer 2

Vous utilisez l'ensemble espacer, mais vos options flottantes créer ce problème. Utilisez une seule direction flottante (ici à gauche).

Malheureusement je ne sais pas POURQUOI cela arrive.

échantillon édité
http://jsfiddle.net/HXyZ7/1/

nav { 
    float: left; 
    width: 25%; 
    background-color: blue; 
} 
article { 
    float: left; /* was floating right before */ 
    background-color: red; 
    width: 75%; 
} 

Answer 3

L'écart blanc disparaît comme je l'augmenter à 75,3: p

nav { 
    float: left; 
    width: 25%; 
    background-color: blue; 
} 
article { 
    float: right; 
    clear:none; 
    background-color: red; 
    width: 75.3%; 
} 

http://jsfiddle.net/sJQeZ/

Answer 4

Webkit a des problèmes de calcul des valeurs de pourcentage.

http://css-tricks.com/percentage-bugs-in-webkit/