Y a-t-il une alternative CSS multi-navigateurs à "width: -moz-fit-content;" de Firefox ?

Question

J'ai besoin que certains divs s'adaptent à la largeur de leur contenu en même temps.

Je le fais actuellement de cette manière :

.mydiv {
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    width: -moz-fit-content;
}

La dernière commande "width: -moz-fit-content;" est exactement ce dont j'ai besoin ! Le seul problème est... cela ne fonctionne que sur Firefox.

J'ai également essayé avec "display:inline-block;", mais j'ai besoin que ces divs se comportent comme des divs. En d'autres termes, chaque div suivant devrait être sous, et non en ligne, par rapport au précédent.

Connaissez-vous une solution possible compatible avec tous les navigateurs ?

Answer 1

Enfin, j'ai résolu le problème simplement en utilisant :

display: table;

Answer 2

La MDN de Mozilla suggère quelque chose comme ce qui suit [source] :

 p {
  width: intrinsèque;           /* Safari/WebKit utilise un nom non standard */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

Answer 3

Dans un cas similaire j'ai utilisé: white-space: nowrap;

Answer 4

Y a-t-il une seule déclaration qui corrige cela pour Webkit, Gecko et Blink? Non. Cependant, il existe une solution multi-navigateurs en spécifiant plusieurs valeurs de propriété de largeur qui correspondent à la convention de chaque moteur de mise en page.

.mydiv {  
  ...
  width: intrinsèque;           /* Safari/WebKit utilise un nom non standard */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  ...
}

Adapté de: MDN

Answer 5

largeur: intrinsèque;           /* Safari/WebKit utilise un nom non standard */
largeur: -moz-max-content;    /* Firefox/Gecko */
largeur: -webkit-max-content; /* Chrome */