Czy istnieje wartość CSS dla różnych przeglądarek dla „width: -moz-fit-content;”?

86

Potrzebuję niektórych elementów DIV, które muszą być wyśrodkowane i jednocześnie dopasować szerokość zawartości .

Teraz robię to w ten sposób:

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

Teraz ostatnie polecenie "width: -moz-fit-content;" jest dokładnie tym , czego potrzebuję!

Problem w tym, że… działa tylko na Firefoksie.

Próbowałem też z "display: inline-block;" , ale potrzebuję tych elementów div, aby zachowywały się jak elementy div. Mianowicie, każdy następny element div powinien znajdować się pod poprzednim , a nie w wierszu .

Czy znasz jakieś możliwe rozwiązanie dla różnych przeglądarek?

firefox css cross-browser

— DuArme
źródło

1

Wypróbuj jedną z tych odpowiedzi: stackoverflow.com/questions/5803030/…

— Matt H

3

Chome obsługuje fit-contentteraz.

— LinuxDisciple,

167

W końcu naprawiłem to po prostu używając:

display: table;

— DuArme
źródło

4

Przyszedłem tutaj, szukając dokładnie tych samych warunków twojego pytania. Zrobiłem display: tablei margin: autowyśrodkować form. Świetny! : D

— Leniel Maccaferri

Wraz z musiałem użyć spacji: pre! Ważne;

— Bimal Das

2

Nie szanuje niektórych atrybutów, np max-width: 100%.

— Daniel

71

MDN Mozilli sugeruje coś takiego [ źródło ]:

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

— Justin Geeslin
źródło

czy możemy określić współczynnik szerokości dwukrotnie, tak jak w przypadku stylizacji p? jak szerokość: wewnętrzna; / * Safari / WebKit używa niestandardowej nazwy / szerokości: -moz-max-content; / Firefox / Gecko * /

— Sagar Bhosale,

1

-moz-max-contentjest tylko odpowiednikiem, -moz-fit-contentgdy element nadrzędny jest szerszy. -moz-fit-contentdopasuje zawartość i zawinie tekst, ale -moz-max-contentbędzie wychodzić poza element nadrzędny. To samo dotyczy Chrome -webkit-max-contenti fit-content.

— LinuxDisciple,

Nie zapomnij dodać width: max-content;.

— Tobias Tengler

13

W podobnym przypadku użyłem: white-space: nowrap;

— user570605
źródło

1

To rozwiązało mój problem z przepełnieniem zawartości listy rozwijanej. Dzięki!

— Zach Leighton,

7

Czy istnieje jedna deklaracja, która naprawia ten problem dla Webkit, Gecko i Blink? Nie. Istnieje jednak rozwiązanie dla różnych przeglądarek, określające wiele wartości właściwości szerokości, które odpowiadają konwencjom każdego aparatu układu.

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

Na podstawie: MDN

— b_archer
źródło

2

Używam tych:

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

— Diyizm
źródło

2

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

— Ihor Pavlyk
źródło

-1

Dlaczego nie użyć niektórych br?

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

Przykład: http://jsfiddle.net/YZV25/

— Jason Gennaro
źródło

2

Dziękuję bardzo, działa, ale zbyt trudno jest obsłużyć górny i dolny margines między elementami div. Znalazłem lepsze rozwiązanie po prostu używając display: table;zamiast display: inline-block;.

— DuArme