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

J'utilise ceux-ci :

.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}

Answer 2

Je cherchais un moyen d'empêcher une longue ligne de texte de dépasser son conteneur, et max-width: fit-content a fonctionné dans Chrome, mais pas dans Firefox.

J'ai trouvé une solution de contournement : si l'élément est le dernier sous-élément affiché, en définissant display: table-caption; et caption-side: bottom; a le même effet, avec display: table; sur l'objet parent.

Answer 3

Pourquoi ne pas utiliser quelques br ?

    Certains contenus
    Plus de contenu qu'avant
    Voici beaucoup de contenu
                       Que je n'anticipais pas    

CSS

.mydiv-centerer{
    text-align: center;
}

.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;
    display:inline-block;
}

Exemple: http://jsfiddle.net/YZV25/