Trucs et astuces CSS

Références

Si vous avez besoin d'informations sur une propriété CSS, je vous invite à visiter la page CSS 2 de DevGuru.com.

Boutons trop larges dans Internet Explorer

Si vous trouvez vos boutons INPUT trop larges dans Internet Explorer, il vous suffit de rajouter les lignes suivantes à leur style CSS:

overflow: visible;
padding: 0em 0.2em;

CSS visibles uniquement par certains navigateurs

Ces hacks sont à utiliser avec modération.

Firefox, Opera, Safari

Le sélecteur suivant fera en sorte que votre CSS ne soit pas visible par Internet Explorer (quelque soit la version) :

* > .classe {}

Internet Explorer 4, 5 et 6

Le sélecteur suivant fera en sorte que votre CSS ne soit visible que par Internet Explorer 6 et inférieur :

* html .classe { }

Internet Explorer 7

Le sélecteur suivant fera en sorte que votre CSS ne soit visible que par Internet Explorer 7 :

*:first-child+html .classe {}

Eléments flottants

Les éléments flottants ont tendance à disparaître dans Internet Explorer (certainement le bug le plus chiant de ce truc (non, ce n'est pas un navigateur)). Pour éviter cela, il y a une méthode simple. Ajoutez le style suivant au conteneur de l'élément flottant qui disparait :

height: 1%;

Pour aller plus loin

Si vous souhaitez que la hauteur de votre conteneur s'adapte à la hauteur des éléments flottants qu'il contient, voici le style à appliquer :

.conteneur:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.conteneur { display: inline-block; }
.conteneur { display: block; }

Un autre style possible est :

.conteneur {
  height: 1%
}

* > .conteneur {
  height: auto;
  overflow: auto;
}

Le sélecteur "* >" fait en sorte que ce style ne soit pas visible par Internet Explorer toutes versions.

Source : Merci à Ed Eliot pour l'article Methods for containing floats.

Éléments retaillables

Pour rendre retaillable à la volée les éléments sous tous les navigateurs sauf Internet Explorer :

.resizable {
  resize: both; /* Options: horizontal, vertical, both */
  overflow: auto; /* fix for Safari */
}

Source : Merci à l'auteur du snippet Resize without JS.

Références

• Je vous conseille l'excellent article CSS Hacks & Issues par Tailored solutions.
• Si les inline-block vous intéressent, je vous conseille l'article Inline-block dans tous les navigateurs modernes ? par Covert Prestige.