是否有"width:-moz-fit-content;"的css跨浏览器值？

Question

我需要一些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.也就是说,每下一格应下,而不是内联,以前的.

你知道任何可能的跨浏览器解决方案吗？

Answer 1

最后我简单地使用以下方法修复它:

display: table;

Answer 2

Mozilla的MDN建议类似以下内容[ 来源 ]:

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

Answer 3

是否有一个声明可以修复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

Answer 4

在类似情况下，我使用了： white-space: nowrap;