“ width:-moz-fit-content;”是否有一个 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;
width: -moz-fit-content;
}
}

现在，最后一个命令 宽度:-moz-fit-content;是我需要的 没错！

唯一的问题是. . 它只能在 Firefox 上运行。

我也尝试使用 “显示: 内联块;”，但是我需要这些 div 表现得像 div。也就是说，每个下一个 div 应该是 低于，而不是 内嵌式，前一个。

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

127024 次浏览
小开

Why not use some 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;
}

Example: http://jsfiddle.net/YZV25/

小开
最佳答案

At last I fixed it simply using:

display: table;
小开

I use these:

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

Mozilla's MDN suggests something like the following [source]:

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

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.

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

Adapted from: MDN

小开

In similar case I used: white-space: nowrap;

小开

I was looking for a way to prevent a long line of text from outgrowing past its container, and max-width: fit-content worked in Chrome, but not in Firefox.

I found a workaround: if the element is the last displayed subelement, setting display: table-caption; and caption-side: bottom; does have the same effect, together with display: table; on the parent object.


提交答案