有没有 CSS 跨浏览器替代火狐"width: -moz-fit-content;"？

Question

我需要一些div 适合他们的内容宽度在同一时间。

我现在这样做:

.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;"正是我所需要的 !唯一的问题是……

我也尝试了"display:inline-block;"，但我需要这些div的行为像div。也就是说，每个下一个div都应该在下，而不是内联。

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

Answer 1

最后我简单地使用:

display: table;

Answer 2

Mozilla的MDN建议如下[source]:

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

Answer 3

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

Answer 4

是否有一个单一的声明来修复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 5

我使用这些:

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

Answer 6

我正在寻找一种方法来防止长行文本超出其容器，max-width: fit-content在Chrome中工作，但在Firefox中不工作。

我找到了一个解决方案:如果元素是最后显示的子元素，设置display: table-caption;和caption-side: bottom;确实具有相同的效果，以及父对象上的display: table;。

Answer 7

为什么不使用一些br s?

<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/