Есть ли кроссбраузерное значение 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;.

— Дарме