Indentation d'arbre du répertoire Web IDE: Pourquoi les résultats de rendu des navigateurs Google Chrome et Firefox sont-ils différents?

Analyse des problèmes de rendu de l'arbre de répertoire Web IDE dans différents navigateurs

Cet article analyse les différences de rendu qui se produisent après avoir renommé le fichier d'arbre du répertoire Web IDE dans Google Chrome et Firefox. Plus précisément, l'indentation des arbres d'annuaire disparaît dans Google Chrome, tandis que Firefox reste normal. Les outils de développeur Google Chrome montrent que l'élément de problème est connu comme margin-right: -17px , qui est l'opposé de l'effet d'indentation attendu (qui devrait être une margin-left positive).

Avant l'opération de renommée, les deux navigateurs affichent normalement l'indentation de l'arborescence du répertoire; Après le changement de nom, seul Google Chrome verra l'indentation disparaître et la valeur margin-right exception sera affichée.

Cette différence peut découler de différences subtiles dans les mécanismes de l'analyse et de rendu des attributs CSS par Google Chrome et Firefox. margin-right: -17px aurait dû déplacer l'élément vers la droite, mais Google Chrome l'interprète à tort à mesure que l'indentation disparaissant sous interférence à partir d'une implémentation spécifique de l'IDE Web ou d'autres styles CSS. Firefox Browser gère ce style différemment pour éviter ce problème.

Solution:

Une solution simple consiste à modifier le code source Web IDE et à modifier la mauvaise margin-right: -17px en margin-left: 17px , contrôlant ainsi correctement la marge gauche de l'élément et réalisant l'indentation attendue. Si le code source ne peut pas être modifié directement, vous devez analyser le style CSS de l'ide Web en profondeur, trouver d'autres règles de style qui peuvent entrer en conflit avec margin-right et effectuer des ajustements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!