cas de test simple:
Un autre exemple:
Dans le site Web de Nokia, vous pouvez voir la pause des conteneurs supérieurs car il n'y a pas d'espace restant. Dans la TESTCASE CSSDESK, si vous inspectez les styles calculés, vous pouvez voir la largeur de la frontière plus élevée.
Pourquoi cela se produit? La frontière n'est pas définie dans
3 Réponses :
Il s'agit d'un artefact du problème de la mise à l'échelle d'une bordure 1Px. Pour illustrer ce qui se passe, j'ai modifié votre cas de test pour inclure Notez que si vous inspectez le style calculé, la largeur de la bordure sera 2px. Ce qui se passe, c'est que Chrome tente d'augmenter l'élément, mais après la mise à l'échelle, la frontière doit toujours être de 1px large s'il doit rester visible (après tout, 1px est la plus petite unité pouvant être rendue sur l'écran de l'ordinateur, et si La largeur de la frontière est réduite à un nombre de points flottant inférieur à 1,0, il sera arrondi à 0px et disparaître). Mais pour justifier la mise à l'échelle, il se compense en ajustant la largeur initiale pour satisfaire l'équation dans cet exemple, car donc dans votre exemple, la largeur ancienne ajustée sera approximativement zoom: 0.5;
Dans le CSS: http://cssdesk.com/zn4lx new_width = 1px , et échelle = 0.5 , il ré-calcule old_width comme 2px . Notez toutefois que la largeur réelle de la frontière rendue après que la mise à l'échelle est toujours juste juste 1px . 1.11111111 px et la largeur de la bordure rendue sera 1px large, mais que toutes les autres largeurs de la disposition supérieure à 1px ont également été réduites d'environ 90%, il n'y a pas de chambre pour une bordure large de 1px, qui donne une disposition cassée.
Quelqu'un affronte-t-il une solution de contournement pour cela, ou il suffit-il d'accepter que notre mise en page se casse lorsque l'utilisateur effectue un zoom avant Win Chrome?
Le pourquoi a été expliqué mais je partageais une solution de contournement que je viens de découvrir: Souvent, vous pouvez remplacer la bordure avec une ombre de la boîte qui ressemble à une bordure mais n'ajoute pas à la largeur extérieure de l'élément:
au lieu de p>
box-shadow: inset 0 0 0 1px red; width: 102px; height: 102px;
La solution Shadow Solution de Shepard pourrait ne pas bien fonctionner pour des éléments avec des enfants qui occupent tout leur espace car l'ombre sera couverte par les enfants.
Une autre solution serait d'utiliser une largeur de bordure supérieure à 1px mais inférieure à 1,5px.
J'ai trouvé bordure-largeur: 1.3px;
1.3px ou 1.4px pour être la valeur idéale et fonctionne en chrome et IE11 avec zoom> = 75%