Esiste un valore css cross-browser per "width: -moz-fit-content;"?

86

Ho bisogno che alcuni div siano posizionati al centro e che si adattino alla larghezza del contenuto allo stesso tempo.

Ora lo sto facendo in questo modo:

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

Ora, l'ultimo comando "width: -moz-fit-content;" è esattamente quello che mi serve!

L'unico problema è che .. funziona solo su Firefox.

Ho anche provato con "display: inline-block;" , ma ho bisogno che questi div si comportino come i div. Vale a dire, ogni div successivo dovrebbe essere sotto , e non in linea , il precedente.

Conosci qualche possibile soluzione cross-browser?

firefox css cross-browser

— Darme
fonte

1

Prova una di queste risposte: stackoverflow.com/questions/5803030/…

— Matt H

4

Chome fit-contentora supporta .

— LinuxDisciple

Tutti i browser (tranne IE) ora supportano fit-content. Su tutti i browser tranne Firefox, funziona senza il prefisso, Firefox ha ancora bisogno -moz-fit-content. Vedi developer.mozilla.org/en-US/docs/Web/CSS/…

— biolauri

168

Alla fine l'ho risolto semplicemente usando:

display: table;

— Darme
fonte

4

Sono arrivato qui cercando esattamente gli stessi termini della tua domanda. Ho fatto display: tablee margin: autocentrare a form. Grande! : D

— Leniel Maccaferri

Inoltre, ho dovuto usare lo spazio bianco: pre! Important;

— Bimal Das

2

Non rispetta alcuni attributi, ad es max-width: 100%.

— Daniel

Tutti i browser (tranne IE) ora supportano fit-content. Su tutti i browser tranne Firefox, funziona senza il prefisso, Firefox ha ancora bisogno -moz-fit-content. Vedi developer.mozilla.org/en-US/docs/Web/CSS/…

— biolauri

72

L'MDN di Mozilla suggerisce qualcosa di simile al seguente [ 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

possiamo specificare la proprietà di larghezza due volte come hai fatto per lo styling p? come larghezza: intrinseca; / * Safari / WebKit utilizza un nome / larghezza non standard : -moz-max-content; / Firefox / Gecko * /

— Sagar Bhosale

1

-moz-max-contentè equivalente solo a -moz-fit-contentmentre l'elemento genitore è più largo. -moz-fit-contentsi adatterà al contenuto e avvolgerà il testo, ma -moz-max-contentsi estenderà al di fuori dell'elemento genitore. Lo stesso vale per Chrome -webkit-max-contente fit-content.

— LinuxDisciple

Non dimenticare di aggiungere width: max-content;.

— Tobias Tengler

14

In un caso simile ho usato: white-space: nowrap;

— user570605
fonte

1

Questo ha risolto il mio problema con l'overflow del contenuto di un menu a discesa. Grazie!

— Zach Leighton

8

Esiste una singola dichiarazione che risolva questo problema per Webkit, Gecko e Blink? No. Tuttavia, esiste una soluzione cross-browser specificando più valori di proprietà di larghezza che corrispondono alla convenzione di ciascun motore di layout.

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

Adattato da: MDN

— b_archer
fonte

2

Io uso questi:

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

— fai da te
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

Perché non usare alcuni 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;
}

Esempio: http://jsfiddle.net/YZV25/

— Jason Gennaro
fonte

2

Grazie mille, funziona, ma rende troppo difficile gestire il margine superiore e inferiore tra i div. Ho trovato una soluzione migliore semplicemente usando display: table;invece di display: inline-block;.

— Darme