“宽度：-moz-fit-content;”是否有css跨浏览器值？答案

【问题标题】：Is there a css cross-browser value for "width: -moz-fit-content;"?“宽度：-moz-fit-content;”是否有css跨浏览器值？
【发布时间】：2011-12-11 22:55:44
【问题描述】：

我需要一些 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 都应该在 under，而不是 inline，前一个。

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

【问题讨论】：

尝试以下答案之一：stackoverflow.com/questions/5803030/…
Chome 现在支持fit-content。
现在所有浏览器（IE 除外）都支持fit-content。在除 Firefox 之外的所有浏览器上，它都可以在没有前缀的情况下工作，Firefox 仍然需要-moz-fit-content。见developer.mozilla.org/en-US/docs/Web/CSS/…

标签： firefox css cross-browser

【解决方案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/

【讨论】：

非常感谢，它可以工作，但是很难处理 div 之间的顶部和底部边距。我找到了一个更好的解决方案，只需使用display: table; 而不是display: inline-block;。

【解决方案2】：

最后我简单地修复了它：

display: table;

【讨论】：

我来这里是为了寻找与您问题相同的术语。我做了display: table 和margin: auto 使form 居中。伟大的！ :D
同时，我不得不使用 white-space:pre!important;
不尊重某些属性，例如max-width: 100%.
所有浏览器（IE 除外）现在都支持fit-content。在除 Firefox 之外的所有浏览器上，它都可以在没有前缀的情况下工作，Firefox 仍然需要-moz-fit-content。见developer.mozilla.org/en-US/docs/Web/CSS/…

【解决方案3】：

我用这些：

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

【讨论】：

【解决方案4】：

Mozilla 的 MDN 建议如下 [source]：

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

【讨论】：

我们可以指定宽度属性的两倍吗？像宽度：内在的； /* Safari/WebKit 使用非标准名称 / width: -moz-max-content; / 火狐/壁虎 */
-moz-max-content 仅相当于 -moz-fit-content 而父元素更宽。 -moz-fit-content 将适合内容并包装文本，但 -moz-max-content 将延伸到父元素之外。同样适用于 Chrome 的 -webkit-max-content 和 fit-content。
别忘了加width: max-content;。

【解决方案5】：

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

【讨论】：

这正是我一直在寻找的东西。非常感谢您的回答。花了几个小时尝试多种解决方法，这解决了我的问题。再次感谢您。！

【解决方案6】：

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

【讨论】：

这解决了我的下拉内容溢出问题。谢谢！

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

【讨论】：