Dix propriétés CSS pratiques et couramment utilisées qui ne sont pas prises en charge par IE

Les plaintes concernant les navigateurs IE, en particulier IE6, sont entrées dans un état de paralysie. Parfois, elles ont même des pensées très négatives : ce serait bien s'il n'y avait qu'un seul navigateur au monde, même si le seul navigateur est IE6. Bien sûr, une telle idée est très morbide, alors abandonnez-la immédiatement. Dans cet article, nous présentons 10 propriétés CSS bien réelles mais non prises en charge par IE. Lister ces propriétés n'est pas pour critiquer IE (il est inutile de critiquer), mais il est préférable de comprendre quelles propriétés CSS ne sont pas prises en charge par IE. . Écrivons CSS et Hack de manière ciblée.

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 peut mal tourner : l'ajout d'une bordure de 1 px à n'importe quel élément de niveau bloc est susceptible d'affecter la mise en page, ce qui augmentera la largeur de l'élément de 2 px supplémentaires.

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é).

Quelqu'un a dit que le code est comme la jupe d'une femme - plus elle est courte, mieux c'est, il semble qu'IE entravera la réalisation de notre souhait.

3. Cellules vides

Cet attribut n'est utilisé que pour les tableaux ou les é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. Compteur-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 l'ordre 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, semblables à une liste ordonnée.

Voici un exemple :

h2 {counter-increment: headers;}
h2:before {content: counter(headers) ". ";}

Le style ci-dessus ajoutera automatiquement un numéro incrémentiel devant toutes les balises

et vous permettra d'obtenir le même effet sur les balises h2 que sur les balises li.

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. Hauteur minimale

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. :hover

从技术上来说，:hover只是一个伪类，但是它在IE6中不被支持（IE7和IE8支持）。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用，可以避免(至少在某种程度上)使用javascript。

但是如果你的网站，需要完全支持IE6，特别是在中国这种IE6一手遮天的情况下，那么你就必须考虑取消使用这个伪类，除非相关的标签有个”href”属性，比如标签。而且如果要实现这种效果，可能必须借助于javascript和额外的样式。

8. Display

Display 通常被设置为这三个值中的一个： block、inline和 none。“得益于”IE，Display的其它值很少被用到。这些值包括 inline-block、table、inline-table和table-cell等，这些属性对于解决一些特殊的布局问题时，是很有用的。

所以，尽管IE 确实支持Display的这三个基本属性，但是它基本上不支持其它属性。

其实，IE8对display的属性支持已经相当完整了。不过，对于inline-block属性，IE6/7只支持本身为inline的元素。

9. Clip

这是一个在特殊情况下能派上用场的很有趣的CSS属性。它可能和不可预知的、动态生成的内容结合起来。简单来说，这个属性允许你在一个特定的元素上 指定隐藏区域——也可以理解为，在一个绝对定位的元素中，按照一定的设置来裁剪该元素的显示区域，超出该区域的内容会被隐藏掉。语法看起来像这样的：

p.clipped {
         padding: 20px;
         width: 400px;
         height: 400px;
         clip: rect(20px, 300px, 200px, 100px);
         position: absolute;
}

修剪只能用于一个绝对定位的元素，而且只用使用矩形区域。括号内的数字划出的区域(200px*180px大小)为可见区域，该区域以外的内容不可见或者被剪切掉。

技术上来讲， clip 属性被IE支持，但是只支持无逗号的语法，比如

p.clipped {
	padding: 20px;
	width: 400px;
	height: 400px;
	clip: rect(20px 300px 200px 100px);
	position: absolute;
}

上面的样式（rect后面括号里的属性没有用逗号隔开）在大多数浏览器下都可运行，但是可能不会通过CSS验证，因为语句没有用逗号隔开。

10. :focus

这是另外一个伪类需要在这里被提及的，因为所有的非IE浏览器，都支持这个属性。:focus伪类允许你声明一个特别的样式，当一个页面元素成为键 盘(鼠标)焦点的时候，将该样式动态的应用到该元素上。这在表单元素上非常有用，因为你可以在一个输入框被选中的时候给它添加一个边框。

下面的样式将在输入框成为键盘焦点的时候添加一个红色的边框：

input:focus {
        border: 1px solid #f00;
}

               

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!