Nous savons que les propriétés de la balise de sélection dans chaque navigateur et la prise en charge de chaque navigateur sont différentes, ce qui fait afficher la boîte de sélection de sélection différemment dans chaque navigateur. Ci-dessous, nous créons une sélection entièrement compatible grâce au support des attributs CSS d'apparence principale.
J'ai utilisé la méthode de contrôle des variables pour écrire une démo pour tester trois situations sur chaque navigateur: height.100.padding.0, height.no.padding.100, n ° hheight.no.padding. Les résultats sont les suivants: les images de liaison, l'apparition de la démo de chaque navigateur.
Nous pouvons dériver les attributs de recherche suivants.
IE6 | IE7 | IE8 | IE9 | ff | ch | SF | faire un coup de pouce | |
Hauteur par défaut | 22px | 22px | 19px | 20px | 19px | 19px | ||
hauteur | F | T | T | T | T | T | F | T |
rembourrage | F | F | T | T | T | T | F | T |
hauteur de ligne | F | F | F | F | F | F | T | F |
Texte à centre verticalement | T | T | T | F | F | T | T | T |
Grâce au résumé mentionné ci-dessus des attributs de résultats de recherche, nous savons que IE6 devrait être fixé à 22px et inchangé à tout moment, tandis que d'autres navigateurs, à l'exception de Safari, prennent en charge l'attribut de hauteur, nous fixons donc la hauteur: 22px. Alors maintenant, corrigeons le navigateur Safari. Nous avons constaté que Seule Safari prend en charge l'attribut linéaire-hauteur, vous pouvez donc utiliser la hauteur de ligne pour corriger sa hauteur à 22px. Lorsque la taille de la police est de 12px, la hauteur de ligne: 22px est défini. En fin de compte, le texte en FF et IE9 n'est pas centré, et le rembourrage: 2px 0 est défini. Nous avons constaté que FF et IE9 sont centrés, mais la hauteur de la sélection de chaque navigateur n'a pas augmenté. Il y a donc un peu de doute ici, sous le réglage de la hauteur, le rembourrage d'un petit nombre de nombres n'augmente pas la hauteur globale?
Vous trouverez ci-dessous un exemple de code entièrement compatible.
Copier le code