prefixer - transform scale text css

¿Existe un valor de css cross-browser para "width:-moz-fit-content;"?

Question

Necesito algunos divs para ubicarlos en el centro y ajustar su ancho de contenido al mismo tiempo.

Ahora lo estoy haciendo así:

.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;
width: -moz-fit-content;
}
}

Ahora, el último comando "ancho: -moz-fit-content;" es exactamente lo que necesito!

El único problema es ... funciona solo en Firefox.

También probé con "display: inline-block;" , pero necesito estos divs para comportarse como divs. A saber, cada div siguiente debe estar debajo , y no en línea , el anterior.

¿Conoces alguna posible solución entre navegadores?

Answer 1

¿Hay alguna declaración que corrija esto para Webkit, Gecko y Blink? No. Sin embargo, existe una solución de varios navegadores al especificar valores de propiedad de ancho múltiple que corresponden a la convención de cada motor de diseño.

.mydiv {
...
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
...
}

Adaptado de: source

Answer 2

¿Por qué no usar algunos br s?

<div class="mydiv-centerer">
<div class="mydiv">Some content</div><br />
<div class="mydiv">More content than before</div><br />
<div class="mydiv">Here is a lot of content that
I was not anticipating</div>
</div>

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;
}

Ejemplo: http://jsfiddle.net/YZV25/

Answer 3

El MDN de Mozilla sugiere algo así como la siguiente [ source ]:

 p {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}

Answer 4

En caso similar, utilicé: white-space: nowrap;

Answer 5

Por fin lo arreglé simplemente usando:

display: table;

Answer 6

Yo uso estos:

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