Comment puis-je arrêter une mise en forme CSS de distorsion lorsque le zoom in/out?

J'ai créé un site de base avec un #div conteneur qui comprend le #navbar et #contenu. Cependant, quand je fais un zoom avant ou arrière, le #navbar fausse, si je zoom dans les liens poussés vers le bas ci-dessous les uns des autres au lieu d'être en ligne. Si je zoom, trop de remplissage est ajouté entre les liens. Comment puis-je arrêter?

HTML:

<div id="navbar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="top.html">Top</a></li>
    <li><strong><a href="free.html">FREE</a></strong></li>
    <li><a href="photo.html">Photo</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

<div id="content">

<p>Some sample text.<p>

</div>


</div>

CSS:

#container {

    position: static;
    background-color: #00bbee;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 7%;
    margin-bottom: 15%;
    border: 2px solid red;


}

#navbar  ul{

    list-style: none;



}

#navbar  li{

    display: inline;

}

#navbar li a{

    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;

}

#navbar li a:hover {

    background-color: white;
    color: green;

}

#navbar {

    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;

}

Comment puis-je arrêter de distorsion?

Aussi, je suis encore assez nouveau pour le CSS, j'ai appris à utiliser % au lieu de px. Est ce que le droit? Aussi tout ce que vous avez à ce point, s'il vous plaît laissez-moi savoir.

Merci d'avance!

Quel navigateur utilisez-vous pour faire des tests? Ils traitent d'un zoom très différemment. Je pense que les pourcentages vont jeter les choses ainsi.
Je ne serais pas s'inquiéter à ce sujet. Certains navigateurs ont "zoom texte" plutôt que le zoom de la page entière. C'est probablement préférable de concentrer les efforts sur la mise en page et de ne pas devenir déformée lorsque la taille du texte les changements ... pas de navigateur zoom de la mise en œuvre, elle sera variable et vous ne pouvez pas vraiment contrôler.
J'utilise firefox. Il y a un moyen de l'empêcher de se déformer, je sais que quand j'ai essayé de faire une mise en forme css avant, les différentes sections de la page de distorsion et de passer sous les uns des autres.
Pztar, avez-vous jamais donner une réponse que vous avez pensé était-elle satisfaisante?
Concernant les pourcentages, il ya un temps et un lieu. Cela vaut également pour px, em, rem, pt, pc, etc etc... Pour garder la mise en page à la recherche de la même chose, vous voulez probablement les éléments associés à l'utilisation px

OriginalL'auteur Pztar | 2012-03-14