Есть ли кроссбраузерное значение css для «width: -moz-fit-content;»?

86

Мне нужно, чтобы некоторые div располагались по центру и одновременно соответствовали ширине их содержимого .

Я сейчас делаю это так:

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

Теперь последняя команда «width: -moz-fit-content;» это именно то , что мне нужно!

Единственная проблема ... он работает только в Firefox.

Я также пробовал с "display: inline-block;" , но мне нужно, чтобы эти div работали как div. А именно, каждый следующий div должен быть ниже предыдущего , а не встроен в него.

Вы знаете какое-нибудь возможное кроссбраузерное решение?

firefox css cross-browser Дарме
источник
1
Попробуйте один из этих ответов: stackoverflow.com/questions/5803030/…
Мэтт Х,
4
Chome поддерживает fit-contentсейчас.
LinuxDisciple
Все браузеры (кроме IE) теперь поддерживают fit-content. Во всех браузерах, кроме Firefox, он работает без префикса, Firefox по-прежнему нужен -moz-fit-content. См developer.mozilla.org/en-US/docs/Web/CSS/...
biolauri

Ответы:

168

Наконец я исправил это, просто используя:

display: table;
Дарме
источник
4
Я попал сюда в поисках тех же терминов, что и ваш вопрос. Я делал display: tableи margin: autoк центру о form. Большой! : D
Лениэль Маккаферри
Наряду с этим мне пришлось использовать white-space: pre! Important;
Бимал Дас
2
Не уважает некоторые атрибуты, например max-width: 100%.
Даниэль
Все браузеры (кроме IE) теперь поддерживают fit-content. Во всех браузерах, кроме Firefox, он работает без префикса, Firefox по-прежнему нужен -moz-fit-content. См developer.mozilla.org/en-US/docs/Web/CSS/...
biolauri
72

MDN Mozilla предлагает примерно следующее [ источник ]:

 p {
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
Джастин Гислин
источник
мы можем указать ширину proerty дважды, как вы это сделали для стиля p? как ширина: внутренняя; / * Safari / WebKit использует нестандартное имя / ширину: -moz-max-content; / Firefox / Gecko * /
Сагар Бхосале
1
-moz-max-contentэквивалентен только -moz-fit-contentтогда, когда родительский элемент шире. -moz-fit-contentпоместит содержимое и обернет текст, но -moz-max-contentбудет выходить за пределы родительского элемента. То же самое относится к Chrome -webkit-max-contentи fit-content.
LinuxDisciple
Не забудьте добавить width: max-content;.
Тобиас Тенглер,
14

В аналогичном случае я использовал: white-space: nowrap;

user570605
источник
1
Это устранило мою проблему с переполнением раскрывающегося списка. Благодаря!
Зак Лейтон
8

Есть ли единая декларация, которая исправляет это для Webkit, Gecko и Blink? Нет. Однако существует кроссбраузерное решение, позволяющее указать несколько значений свойств ширины, которые соответствуют соглашению каждого механизма компоновки.

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

Адаптировано из: MDN

b_archer
источник
2

Я использую эти:

.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}
дийизм
источник
2 
width: intrinsic;           /* Safari/WebKit uses a non-standard name */
width: -moz-max-content;    /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
Игорь Павлык
источник
-1

Почему бы не использовать некоторые 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;
}

Пример: http://jsfiddle.net/YZV25/

Джейсон Дженнаро
источник
2
Большое спасибо, это работает, но слишком сложно обрабатывать верхнее и нижнее поле между div. Я нашел лучшее решение, просто используя display: table;вместо display: inline-block;.
Дарме