Pourquoi mon ne rétrécit-il pas comme prévu ? Il semble avoir un problème de min-width: min-content non amovible.

ne rétrécit pas comme prévu ; il semble y avoir une largeur minimale inamovible : min-content

problème

J'en ai un , l'une des valeurs de texte est très longue. Je souhaite que le soit réduit pour ne jamais être plus large que son parent, même s'il doit tronquer son texte d'affichage. max-width : 100 % devrait faire l'affaire.

Résultats attendus

Résultat réel

Solution de contournement

Mise à jour (25 septembre 2017)

Le bug de Firefox décrit ci-dessous a été corrigé dans Firefox 53 et le lien vers cette réponse a également été supprimé de Bootstrap retiré du document.

En outre, mes plus sincères excuses aux contributeurs de Mozilla qui ont dû bloquer la suppression du support de -moz-document en partie à cause de cette réponse.

Correction

Dans WebKit et Firefox 53, vous pouvez remplacer la valeur par défaut de min-content simplement en définissant min-width: 0 sur l'ensemble de champs. ¹

Firefox est cependant un peu bizarre en ce qui concerne les ensembles de champs. Pour que cela fonctionne correctement dans les versions antérieures, vous devez modifier la propriété d'affichage du fieldset sur l'une des valeurs suivantes :

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

Parmi eux, je recommande cellule de table. Table-row et table-row-group vous empêchent de modifier la largeur, tandis que table-column et table-column-group vous empêchent de modifier la hauteur.

Cela (assez légitimement) interrompt le rendu dans IE. Puisque seul Gecko doit faire cela, vous pouvez légitimement masquer cet effet aux autres navigateurs en utilisant l'une des extensions CSS propriétaires de Mozilla, @-moz-document :

@-moz -document préfixe-url() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">fieldset {
    display: table-cell;
}

Copier après la connexion

}

(Ceci est un jsFiddle Démo. )

Cause

Cela résout le problème, mais si vous êtes comme moi, votre réaction est probablement...

Quoi ?

Il y a une raison, mais ce n’est pas facile à comprendre. Le rendu par défaut de l'élément

fieldset est ridicule et essentiellement impossible à spécifier en CSS. Pensez-y : la bordure du fieldset disparaît là où elle chevauche l'élément de légende, mais l'arrière-plan est toujours visible ! Aucune autre combinaison d'éléments ne peut reproduire cet effet.

Plus important encore, la mise en œuvre regorge de concessions sur les comportements hérités. L'un d'eux est que la largeur minimale d'un ensemble de champs n'est jamais inférieure à la largeur intrinsèque de son contenu. WebKit fournit un moyen de remplacer ce comportement en le spécifiant dans la feuille de style par défaut, mais Gecko² va encore plus loin et applique ce comportement dans le moteur de rendu.

Cependant, les éléments de table internes constituent un type de cadre spécial dans Gecko. Le calcul des contraintes de taille pour les éléments avec ces paramètres de valeur d'affichage s'effectue dans un chemin de code distinct, contournant complètement la largeur minimale appliquée sur l'ensemble de champs.

Encore une fois - Firefox 53 a un correctif de bogue pour ce problème, vous n'avez donc pas besoin de ce correctif si vous ciblez uniquement les versions plus récentes.

Est-il sécuritaire d'utiliser @-moz-document ?

Pour ce problème, c'est sans danger. @-moz-document fonctionne comme prévu dans toutes les versions de Firefox (jusqu'à la 53, où ce bug a été corrigé).

Ce n’est pas un hasard. En partie à cause de cette réponse, le bogue limitant @-moz-document aux feuilles de style utilisateur/UA a été configuré pour s'appuyer d'abord sur la correction du bogue de l'ensemble de champs sous-jacent.

De plus, n'utilisez pas @-moz-document en CSS pour cibler Firefox , malgré le fait que d'autres ressources le fassent. ³

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!