Comment afficher uniquement les barres de défilement horizontales dans un élément CSS Div ?

Comment afficher les barres de défilement horizontales uniquement dans l'élément CSS Div

Les conteneurs Div sont couramment utilisés pour afficher les éléments en HTML. Pour afficher automatiquement les barres de défilement horizontales et verticales lorsque le contenu dépasse la largeur et la hauteur définies du div, la propriété overflow peut être définie sur auto.

Problème :

Lorsqu'un conteneur div a son style défini avec overflow: auto, les barres de défilement horizontales et verticales apparaissent automatiquement, même si le contenu ne déborde qu'horizontalement. L'objectif est d'afficher uniquement les barres de défilement horizontales tout en contrôlant la hauteur du tableau par programme.

Solution :

La clé pour résoudre ce problème réside dans l'utilisation du CSS3 proposé. extension, qui permet un contrôle indépendant des barres de défilement. Voici comment y parvenir :

overflow: auto;
overflow-y: hidden;

Ce code CSS masque la barre de défilement verticale tout en permettant à la barre de défilement horizontale d'apparaître automatiquement.

Compatibilité IE :

IE6-7, ainsi que d'autres navigateurs, prennent en charge l'extension CSS3 pour le contrôle de la barre de défilement. Cependant, IE8 introduit une exigence supplémentaire :

-ms-overflow-y: hidden;

Cette ligne garantit la compatibilité ascendante en mode standard IE8, répondant à un changement potentiel d'implémentation de Microsoft.

Remarques supplémentaires :

• Il convient de noter que la présence de barres de défilement horizontales et verticales dans IE est probablement due à un bug. Des tests dans d'autres navigateurs devraient confirmer le problème.
• IE8 pourrait introduire un correctif pour le bogue, rendant inutile le code CSS supplémentaire pour IE8.

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!