Existe um valor css cross-browser para “width: -moz-fit-content;”?

86

Preciso que alguns divs sejam posicionados no centro e se ajustem à largura do conteúdo ao mesmo tempo.

Agora estou fazendo assim:

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

Agora, o último comando "width: -moz-fit-content;" é exatamente o que eu preciso!

O único problema é ... funciona apenas no Firefox.

Eu também tentei com "display: inline-block;" , mas preciso que esses divs se comportem como divs. Ou seja, cada próximo div deve estar abaixo , e não em linha , do anterior.

Você conhece alguma solução possível para vários navegadores?

firefox css cross-browser

— Darme
fonte

1

Experimente uma das seguintes respostas: stackoverflow.com/questions/5803030/…

— Matt H

4

Chome apóia fit-contentagora.

— LinuxDisciple

Cada navegador (exceto o IE) agora oferece suporte fit-content. Em todos os navegadores, exceto o Firefox, ele funciona sem o prefixo, o Firefox ainda precisa -moz-fit-content. Consulte developer.mozilla.org/en-US/docs/Web/CSS/…

— biolauri

168

Por fim, resolvi simplesmente usando:

display: table;

— Darme
fonte

4

Cheguei aqui procurando exatamente os mesmos termos da sua pergunta. Eu fiz display: tablee margin: autocentrar a form. Ótimo! : D

— Leniel Maccaferri

Junto com, eu tive que usar o espaço em branco: pre! Important;

— Bimal Das

2

Não respeita alguns atributos, por exemplo max-width: 100%.

— Daniel

Cada navegador (exceto o IE) agora oferece suporte fit-content. Em todos os navegadores, exceto o Firefox, ele funciona sem o prefixo, o Firefox ainda precisa -moz-fit-content. Consulte developer.mozilla.org/en-US/docs/Web/CSS/…

— biolauri

72

O MDN da Mozilla sugere algo como o seguinte [ fonte ]:

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

— Justin Geeslin
fonte

podemos especificar a propriedade de largura duas vezes como você fez para o estilo p? como largura: intrínseca; / * Safari / WebKit usa um nome / largura não padrão : -moz-max-content; / Firefox / Gecko * /

— Sagar Bhosale

1

-moz-max-contenté apenas equivalente a -moz-fit-contentenquanto o elemento pai é mais largo. -moz-fit-contentajustará o conteúdo e envolverá o texto, mas -moz-max-contentse estenderá para fora do elemento pai. O mesmo se aplica ao Chrome -webkit-max-contente fit-content.

— LinuxDisciple

Não se esqueça de adicionar width: max-content;.

— Tobias Tengler

14

Em caso semelhante, usei: white-space: nowrap;

— user570605
fonte

1

Isso corrigiu meu problema com o estouro de conteúdo do menu suspenso. Obrigado!

— Zach Leighton

8

Existe uma única declaração que corrige isso para Webkit, Gecko e Blink? Não. No entanto, há uma solução para vários navegadores especificando vários valores de propriedade de largura que correspondem à convenção de cada mecanismo de layout.

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

Adaptado de: MDN

— b_archer
fonte

2

Eu uso estes:

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

— diyism
fonte

2

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

— Ihor Pavlyk
fonte

-1

Por que não usar alguns brs?

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

Exemplo: http://jsfiddle.net/YZV25/

— Jason Gennaro
fonte

2

Muito obrigado, funciona, mas torna muito difícil lidar com as margens superior e inferior entre os divs. Encontrei uma solução melhor simplesmente usando em display: table;vez de display: inline-block;.

— Darme