1. Aperçu Le style ci-dessus (les propriétés dans les supports après le RECT ne sont pas séparées par des virgules) peuvent être exécutées dans la plupart des navigateurs, mais peuvent ne pas passer la vérification CSS car l'instruction n'est pas séparée par les virgules.
Lors du débogage d'un problème CSS, j'ajoute souvent des frontières à l'élément spécifié pour voir avec précision ce qui arrive à l'élément et aider à déterminer la source du problème. Ceci est souvent efficace car cela me donne une visibilité plus spécifique dans la disposition. Mais s'il s'agit d'un élément au niveau du bloc, cela peut provoquer des erreurs - l'ajout d'une bordure 1px à n'importe quel élément au niveau de bloc affectera très probablement la disposition, ce qui ajoutera un 2Px supplémentaire à la largeur de cet élément.
La propriété Outline est une alternative parfaite car elle rend l'objet sans affecter le flux de documents. Cependant, IE6 et IE7 ne prennent pas en charge l'attribut de contour, il ne peut donc pas être utilisé pour déboguer dans les deux navigateurs.
2. Héritage (valeur)
Il existe de nombreux exemples dans le développement de CSS: "Hériter" toutes les propriétés ajoutées de son élément parent en définissant certains styles sur un élément spécifique, vous pouvez donc éviter beaucoup d'entrée de clavier.
Cela peut être facilement réalisé en établissant un héritage. Cela peut être utile. Par exemple, lors de la réécriture de l'attribut d'arrière-plan, il existe souvent de nombreux textes dans l'attribut (couleur, adresse d'URL, emplacement, etc.). Ainsi, au lieu de réécrire ces valeurs, vous voudrez peut-être simplement considérer que les éléments du processus ont les mêmes propriétés d'arrière-plan que leur élément parent, une valeur d'héritage peut tout faire - ce qui enregistre évidemment beaucoup la saisie du clavier.
Malheureusement, les valeurs de l'héritage ne sont pas prises en charge dans IE6 et IE7 (sauf pour la direction (orientation du texte) et les propriétés de visibilité).
3. Cellules vides
Cette propriété n'est utilisée que pour des éléments dont la propriété Table ou "Affichage" est définie sur "Table-cellule". Si vous ajoutez dynamiquement du contenu à une table, vous pouvez rencontrer le contenu vide d'une cellule, puis vous ne voulez pas que la cellule vide soit cachée.
L'utilisation de "cellules vides: masquer" peut résoudre ce problème, qui masquera complètement les cellules qui peuvent se produire.
Internet Explorer ne prend pas en charge l'attribut de cellules vides.
4. Légende
En parlant de l'attribut de table, cet attribut est utilisé pour déclarer le titre de table affiché dans la barre latérale de la table. Il accepte quatre valeurs: en haut, en bas, à gauche et à droite. L'exporateur Internet ne prend pas en charge cette propriété, le titre de la table apparaîtra toujours en haut de la table dans IE6 et IE7.
5. Counter-Increment / Counter-Ressest
Les listes commandées (<l>) sont très pratiques car elles vous font économiser les tracas d'ajouter des nombres incrémentiels manuellement, et cela vous permet de modifier la séquence des listes sans modifier les nombres.
CSS possède des propriétés contre-incrément et contre-réinitialisation, qui vous permettent de générer automatiquement des nombres incrémentiels sur presque tous les éléments HTML, tout comme l'effet d'une liste ordonnée.
Mais IE6, IE7 et même Safari (jusqu'à la version 3.x) ne prennent pas en charge ces propriétés. Bien sûr, IE6 ne soutient pas: avant les pseudo-éléments.
6.
Parfois, la conception ou la disposition d'un site Web nécessite une zone de contenu avec une hauteur fixe, sinon les effets visuels spécifiques seront perdus. Cela pourrait être dû à un fond dégradé, à une liste déroulante unique, ou cela pourrait être dû à un effet brillant cool de PS. Mais parfois, il y a beaucoup de contenu dans la page, mais la page ne peut pas être élargie comme prévu.
Pour le moment, l'attribut min-height doit être utilisé, car il peut dire au navigateur de rendre la hauteur minimale sur un élément spécifique au niveau du bloc, que la hauteur réelle du contenu atteigne cette hauteur minimale. Ensuite, si le contenu dépasse la hauteur minimale, l'élément se développera modérément.
La seule chose à noter avec Min-Height est qu'elle n'est pas prise en charge dans IE6. Nous savons tous que IE6 sort de la scène de l'histoire (lentement), mais certains clients peuvent toujours demander à leur site Web de soutenir ce putain de navigateur.
Mais c'est bien que IE6 ait la valeur de la hauteur de la même manière que d'autres navigateurs rendent "min-height", vous n'avez donc besoin que d'un piratage ou d'une feuille de style indépendante pour IE6 pour ajouter des feuilles de style spécifiques à cet élément.
IE6 ignore également la largeur min, la hauteur maximale et la largeur maximale, mais les méthodes ci-dessus sont également possibles dans ces propriétés.
7 .: Rover
Techniquement,: Hover n'est qu'un pseudo-classe, mais il n'est pas pris en charge dans IE6 (pris en charge par IE7 et IE8). Le: Hover pseudo-classe vous permet d'ajouter des styles de souris à l'élément. Ceci est très utile et peut éviter (au moins dans une certaine mesure) en utilisant JavaScript.
Cependant, si votre site Web doit prendre en charge entièrement IE6, en particulier en Chine où IE6 est plein de puissance, vous devez envisager d'annuler l'utilisation de cette pseudo-classe à moins que la balise pertinente ait un attribut "HREF", tel que <a> TAG . Et si cet effet doit être réalisé, il peut être nécessaire d'utiliser JavaScript et des styles supplémentaires.
8. Affichage
L'affichage est généralement défini sur l'une de ces trois valeurs: bloc, en ligne et aucun. «Grâce à IE, d'autres valeurs d'affichage sont rarement utilisées. Ces valeurs incluent le bloc en ligne, la table, la table en ligne et la table de table.
Ainsi, bien que IE prenne en charge ces trois propriétés de base de l'affichage, elle ne prend essentiellement pas les autres propriétés.
En fait, la prise en charge immobilière d'IE8 pour l'affichage est assez complète. Cependant, pour l'attribut de blocage en ligne, IE6 / 7 ne prend en charge que des éléments qui sont en ligne lui-même.
Pour en savoir plus sur la prise en charge de Display dans divers navigateurs, veuillez vous référer à cette note Shenfei
9. Clip
Il s'agit d'un attribut CSS intéressant qui est utile dans des cas spéciaux. Il peut être combiné avec un contenu imprévisible et généré dynamiquement. En termes simples, cette propriété vous permet de spécifier des zones cachées sur un élément spécifique - il peut également être compris comme dans un élément absolument positionné, la zone d'affichage de l'élément est coupée en fonction de certains paramètres, et le contenu au-delà de cette zone être caché.
Techniquement parlant, l'attribut Clip est pris en charge par IE, mais prend uniquement en charge la syntaxe sans virgules, telle que
div.clipplipd {
rembourrage: 20px;
Largeur: 400px;
hauteur: 400px;
Clip: RECT (20px 300px 200px 100px);
Position: absolue;
}
10 .: Focus
Il s'agit d'une autre pseudo-classe qui doit être mentionnée ici, car tous les navigateurs non IE prennent en charge cette propriété. Le: Focus Pseudo-Class vous permet de déclarer un style spécial. Ceci est très utile sur les éléments de formulaire, car vous pouvez ajouter une bordure à une boîte d'entrée lorsqu'elle est sélectionnée.