Dans Firefox, mes résultats sont comme prévu. Je tente d'ajouter width et padding pour compléter la taille réelle. En chrome ceci ne semble fonctionner,chrome rembourrage pourcentage + largeur pourcentage ne pas additionner
.tab-content {
padding: 10px 5% 10px 5%;
width:100% !important;
}
Dans Firefox ce qui provoque pour aller 110% (ce que Id être attend), en chrome 100%, Merci pour l'aide.
Si vous utilisez 100% en CSS2 cela signifie que la largeur finale de l'élément (et non la largeur CSS) sera: border-left + padding-left + largeur + padding-right + bordure-droite.
Donc, dans votre cas, il est interprété comme 110%:
0 + 5% + 100% + 5% + 0 = 110%
Une solution parfaite pourrait être:
.tab-content {
padding: 10px 5% 10px 5%;
width:90%;
}
Vous pouvez utiliser case-size propriété de CSS3 MAIS il a quelques bugs dus à la façon de l'interpréter. Je ne recommande pas l'utiliser. Si elle est utilisée, la propriété width CSS inclura les bordures et les paddings.
Essayez -webkit-box-sizing, cela pourrait être la cause d'un problème.
Plus d'infos sur CSS Tricks
Merci, mais le problème était que les 90% ne fonctionnaient que sur firefox, au final j'ai utilisé la taille de boîte car c'était la seule solution que je pouvais trouver, et c'est seulement une petite partie du site. – Adrian
Etes-vous sûr? En chrome fonctionne parfaitement (comme d'habitude): http://jsfiddle.net/ESHjK/ –