Pourquoi mon `` ne se redimensionne-t-il pas correctement dans Firefox ?

Problème de redimensionnement

Problème :

Un

ne parvient pas à redimensionner sa largeur pour l'adapter à son conteneur parent, même lorsque le l'élément a une largeur maximale : 100 %. Le problème n'est observé que dans Firefox et Firefox pour Android.

Cause :

Dans les navigateurs Gecko (y compris Firefox), les ensembles de champs ont une largeur minimale imposée égale à la largeur intrinsèque largeur de leur contenu par défaut. Ce comportement n'est pas modifiable dans le moteur de rendu de Gecko.

Solution :

Pour résoudre le problème de redimensionnement dans Firefox, définissez la propriété d'affichage du fieldset sur l'une des valeurs suivantes :

• tableau-cellule (recommandé)
• table-colonne
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

De plus, pour masquer ce correctif des autres navigateurs, utilisez le @- Extension CSS moz-document :

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

Remarque : Ce hack @-moz-document n'est plus nécessaire dans Firefox 53 et versions ultérieures, car le bug sous-jacent a été corrigé.

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!

source：php.cn

Article précédent：Décodage de StyleX : le système de style de pointe de Meta Article suivant：ID ou classe : quand devez-vous utiliser chaque sélecteur CSS ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

3

2302

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

11

2434

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

2048

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1932

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

2002

Rubriques connexes

Plus>

• emplacement.hash
• site officiel de notepad++
• introduction au fichier hiberfil
• Solution au problème selon lequel le système Win7 ne peut pas démarrer
• Introduction aux logiciels de dessin architectural
• Méthodes de chiffrement courantes pour le stockage de données chiffrées
• quel fichier est iso
• Comment démarrer le service MySQL

Recommandations populaires

• Comment configurer CSS pour dépasser les ellipses d'affichage
• Comment définir la taille de la police en CSS
• Comment utiliser le survol en CSS
• Comment définir l'espacement des caractères en CSS
• Quelles sont les nouvelles fonctionnalités de CSS3

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1424529
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4270966
• 
  Tutoriel vidéo JAVA pour débutants

  2550410
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  508370
• 
  Tutoriel d'introduction PHP base zéro

  863890

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1424529 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2550410 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  508370 temps d'étude
• 
  Introduction rapide au développement web front-end

  215998 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  892746 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  7713 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  6182 temps d'étude
• 
  Aller au langage pratique GraphQL

  5091 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  706 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  25790 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)
• [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)
• [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)
• [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes
• [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)
• [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nous Clause de non-responsabilité Sitemap

© php.cn All rights reserved