1. Aperçu
Lors du débogage de problèmes CSS, j'ajoute souvent une bordure à un élément spécifique pour voir exactement ce qui arrive à cet élément et aider à déterminer la source du problème. Cela fonctionne souvent car cela me donne une visibilité plus précise sur la mise en page. Mais s'il s'agit d'un élément de niveau bloc, quelque chose pourrait mal se passer : l'ajout d'une bordure de 1 px à n'importe quel élément de niveau bloc est susceptible d'affecter la mise en page en élargissant l'élément de 2 px.
La propriété outline est un remplacement parfait car elle restitue l'objet sans affecter le flux du document. Cependant, IE6 et IE7 ne prennent pas en charge l'attribut outline, il ne peut donc pas être utilisé pour le débogage dans ces deux navigateurs.
2. Hériter (valeur)
Il existe de nombreux exemples de cela dans le développement CSS : en définissant certains styles sur un élément spécifique pour indiquer à cet élément "d'hériter" de toutes les propriétés ajoutées de son élément parent, vous pouvez éviter une quantité considérable de saisies au clavier.
Ceci peut être facilement réalisé en définissant l'héritage. Cela peut être utile. Par exemple, lors du remplacement de l'attribut background, il y a souvent beaucoup de texte dans l'attribut (couleur, URL de l'image, emplacement, etc.). Ainsi, plutôt que de réécrire ces valeurs, vous souhaiterez peut-être simplement que l'élément en question ait la même propriété d'arrière-plan que son parent, et une valeur héritée fera l'affaire - économisant évidemment beaucoup de saisie au clavier.
Malheureusement, les valeurs héritées ne sont pas prises en charge dans IE6 et IE7 (à l'exception des propriétés de direction (direction du texte) et de visibilité).
3. Cellules vides
Cet attribut n'est utilisé que pour les tableaux ou éléments dont l'attribut "display" est défini sur "table-cell". Si vous ajoutez dynamiquement du contenu à un tableau, vous pouvez rencontrer une situation dans laquelle le contenu d'une certaine cellule est vide et vous ne souhaitez pas que la bordure, la couleur d'arrière-plan, l'image d'arrière-plan, etc. de cette cellule vide soient masquées.
L'utilisation de "empty-cells: hide" peut résoudre ce problème, en masquant complètement les cellules où cette situation peut se produire.
Internet Explorer ne prend pas en charge l'attribut cellules vides.
4. Côté légende
En parlant de l'attribut table, cet attribut est utilisé pour déclarer le titre du tableau qui est affiché dans la colonne latérale du tableau. Il accepte quatre valeurs : haut, bas, gauche et droite. Internet Exporer ne prend pas en charge cet attribut, le titre du tableau apparaîtra toujours en haut du tableau dans IE6 et IE7.
5. Contre-incrément/compteur-réinitialisation
Une liste ordonnée (
) est très pratique car elle vous évite d'avoir à ajouter manuellement des nombres incrémentiels et vous permet de modifier la séquence de la liste sans changer les nombres.
CSS possède les propriétés counter-increment et counter-reset, qui vous permettent de générer automatiquement des nombres incrémentiels sur presque tous les éléments HTML, comme 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 entendu, IE6 ne prend pas non plus en charge le pseudo-élément :before.
6.Min-Hauteur
Parfois, la conception ou la structure de mise en page d'un site Web nécessite une zone de contenu d'une hauteur fixe, sinon un certain effet visuel est perdu. Cela peut être dû à un arrière-plan dégradé, à une liste déroulante unique ou peut-être à un effet de lueur sympa provenant de Photoshop. Mais parfois, il y a beaucoup de contenu dans la page, mais la page ne peut pas être développée comme prévu.
À ce stade, vous devez utiliser l'attribut min-height, car il peut indiquer au navigateur d'afficher la hauteur minimale sur un élément spécifique au niveau du bloc, que la hauteur réelle du contenu atteigne ou non cette hauteur minimale. Ensuite, si le contenu dépasse la hauteur minimale, l'élément se développera de manière appropriée.
La seule chose à noter concernant l’utilisation de min-height est qu’elle n’est pas prise en charge dans IE6. Nous savons tous qu'IE6 est (lentement) en train de disparaître, mais certains clients peuvent encore exiger que leurs sites prennent en charge ce foutu navigateur.
La bonne nouvelle est que IE6 restitue la valeur de hauteur exactement de la même manière que les autres navigateurs affichent "min-height", donc tout ce dont vous avez besoin est un hack spécifique à IE6 ou une feuille de style autonome pour ajouter une hauteur spécifique, le problème est résolu.
IE6 ignore également min-width, max-height et max-width, mais la méthode ci-dessus est également réalisable pour ces propriétés.
7. : survolez
Techniquement, :hover n'est qu'une pseudo-classe, mais elle n'est pas prise en charge dans IE6 (IE7 et IE8 le prennent en charge). La pseudo-classe :hover vous permet d'ajouter n'importe quel style de survol de la souris à un élément. Ceci est très utile et évite (au moins dans une certaine mesure) l’utilisation de JavaScript.
Mais si votre site Web doit pleinement prendre en charge IE6, en particulier en Chine où IE6 domine le ciel, vous devez alors envisager d'annuler l'utilisation de cette pseudo-classe, à moins que la balise correspondante n'ait un attribut « href », comme la balise . . Et si vous souhaitez obtenir cet effet, vous devrez peut-être recourir à Javascript et à des styles supplémentaires.
8.Affichage
L'affichage est généralement défini sur l'une de ces trois valeurs : block, inline et none. "Grâce" à IE, les autres valeurs de Display sont rarement utilisées. Ces valeurs incluent inline-block, table, inline-table et table-cell, etc. Ces attributs sont très utiles pour résoudre certains problèmes de mise en page particuliers.
Par conséquent, même si IE prend en charge ces trois propriétés de base de Display, il ne prend fondamentalement pas en charge les autres propriétés.
En fait, la prise en charge par IE8 des attributs d'affichage est assez complète. Cependant, pour l'attribut inline-block, IE6/7 ne prend en charge que les éléments eux-mêmes en ligne.
Pour en savoir plus sur la prise en charge de l'affichage dans différents navigateurs, veuillez vérifier ici - Shenfei Note
9. Clip
Il s'agit d'une propriété CSS intéressante qui peut s'avérer utile dans des situations particulières. Il peut être combiné avec un contenu imprévisible généré dynamiquement. En termes simples, cet attribut permet de spécifier une zone cachée sur un élément spécifique - cela peut aussi être compris comme, dans un élément positionné de manière absolue, la zone d'affichage del'élément est recadrée selon certains paramètres, et le contenu au-delà de cette zone sera masqué.
Techniquement parlant, l'attribut clip est pris en charge par IE, mais ne prend en charge que la syntaxe sans virgule, telle que
div.clipped {
remplissage : 20 px ;
largeur : 400 px ;
hauteur : 400px ;
clip : rect(20px 300px 200px 100px);
position : absolue ;
} Le style ci-dessus (les attributs entre parenthèses après rect ne sont pas séparés par des virgules) peut s'exécuter dans la plupart des navigateurs, mais peut ne pas passer la validation CSS car les instructions ne sont pas séparées par des virgules.
10. :concentrez-vous
Il s'agit d'une autre pseudo-classe qui doit être mentionnée ici, car tous les navigateurs non IE prennent en charge cet attribut. La pseudo-classe :focus vous permet de déclarer un style spécial qui est appliqué dynamiquement à un élément de page lorsqu'il devient le focus clavier (souris). Ceci est utile sur les éléments de formulaire car vous pouvez ajouter une bordure à un champ de saisie lorsqu'il est sélectionné.
