Comment la bordure est rendue dans le navigateur

La méthode de rendu de l'attribut border dans le navigateur est discutée depuis longtemps dans le groupe QQ, et j'ai toujours utilisé border:0 none pour la gérer. Bien sûr, il y a aussi des raisons pour lesquelles je le fais. Cette raison sera mentionnée dans l’analyse ci-dessous. Avant d’analyser les propriétés des bordures, quelques points doivent être expliqués :

1. Xiaozhi, je ne suis pas un expert en analyse, j'utilise simplement les deux outils Firebug et IE Developer pour afficher les résultats du rendu du navigateur dans le navigateur FF et le navigateur IE ;
2. Étant donné que nous avons uniquement examiné les résultats de rendu du navigateur FF et du navigateur IE, cela ne signifie pas que tous les navigateurs s'affichent de la même manière.

Afin de mieux comparer les styles de bordure, nous choisissons ici l'élément "bouton", mais les balises utilisées sont différentes. Ce sont des éléments de balise d'entrée et des éléments de balise bouton. À propos, il convient de mentionner que le point commun de ces deux éléments d'étiquette dans différents navigateurs est qu'ils sont tous deux des éléments de contrôle du système. Le style de bordure et l'arrière-plan des boutons ont une relation absolue avec le thème du système.

En utilisant le même code de structure XHTML, comparez respectivement le navigateur FF et le navigateur IE.

<input type="bouton" valeur="Bouton" />
<heure />
<bouton>Bouton</bouton>

Animation de démonstration 1 Animation de démonstration 2

Grâce à l'influence du style par défaut du thème système actuel, nous avons constaté que le navigateur IE présente déjà une petite différence dans l'analyse des deux éléments de balise, bouton et entrée, mais dans la mesure où la page vue dans le thème système actuel est concerné, L'effet sur la performance est presque le même. Les étudiants intéressés par ce point peuvent expérimenter par eux-mêmes. Dans les résultats d'attribut vus dans la colonne ci-dessus sans aucune définition de style CSS, le résultat que nous obtenons est :

*Navigateur FF : les styles de bordure des balises d'entrée et des balises de bouton sont border-width : 3px ; border-style : border-color : #E5E5E5 ;
* Navigateur IE : le style de bordure de l'étiquette d'entrée est border-width:2px ; border-style :outset et le style de bordure de l'étiquette du bouton est border-width :2px ;

Avec ces données, regardons quel sera le résultat lorsque nous définirons un style pour l'attribut border.