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