CSS “宽度：-moz-fit-content;”是否有css跨浏览器值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7839164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a css cross-browser value for "width: -moz-fit-content;"?
提问by Darme
I need some divs to be center-positionedand to fit their content widthat the same time.
我需要一些 div居中并同时适应它们的内容宽度。
I am now doing it like this:
我现在是这样做的：
.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;
}
}
Now, the last command "width: -moz-fit-content;"is exactlywhat I need!
现在，最后一个命令“宽度：-moz-fit-content;” 是正是我所需要的！
Only problem is.. it works only on Firefox.
唯一的问题是……它只适用于 Firefox。
I also tryed with "display:inline-block;", but I need these divs to behave like divs. Namely, every next div should be under, and not inline, the previous.
我也尝试过“display:inline-block;” ，但我需要这些 div 表现得像 div。也就是说，每个下一个 div 都应该在前一个 div下，而不是inline。
Do you know any possible cross-browser solution?
您知道任何可能的跨浏览器解决方案吗？
回答by Darme
At last I fixed it simply using:
最后，我简单地使用以下方法修复了它：
display: table;
回答by Justin Geeslin
回答by user570605
In similar case I used: white-space: nowrap;
在类似的情况下，我使用： white-space: nowrap;
回答by b_archer
Is there a single declaration that fixes this for Webkit, Gecko, and Blink? No. However, there is a cross-browser solution by specifying multiple width property values that correspond to each layout engine's convention.
是否有针对 Webkit、Gecko 和 Blink 修复此问题的单一声明？不可以。但是，通过指定与每个布局引擎的约定相对应的多个宽度属性值，有一种跨浏览器解决方案。
.mydiv {
...
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
...
}
Adapted from: MDN
改编自：MDN
回答by Ihor Pavlyk
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
回答by diyism
I use these:
我使用这些：
.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}
回答by Sivakumar Tadisetti
Below one worked for me in both chrome and firefox
下面一个在 chrome 和 firefox 中都对我有用
div {
max-width: max-content;
}
回答by Jason Gennaro
Why not use some brs?
为什么不使用一些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
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;
}
Example:http://jsfiddle.net/YZV25/
