有没有可以替代 Firefox 的 CSS 跨浏览器替代品？ “宽度：-moz-fit-content；”？

发布于 2024-12-11 10:22:06 字数 599 浏览 0 评论 0原文

我需要一些 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;”正是我需要的！唯一的问题是......它只适用于 Firefox。

我也尝试过使用“display:inline-block;”，但我需要这些 div 表现得像 div。也就是说，下一个 div 应该位于前一个 div 的下方，而不是内联。

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

原文

I need some divs to fit their content width at the same time.

I am now doing it like this:

.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;
}

The last command "width: -moz-fit-content;" is exactly what I need! The only problem is... it works only on Firefox.

I also tried 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.

Do you know any possible cross-browser solution?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

许你一世情深 2024-12-18 10:22:07

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

display: table;

At last I fixed it simply using:

display: table;

回复收藏 0 原文

剧终人散尽 2024-12-18 10:22:07

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

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

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

回复收藏 0 原文

短叹 2024-12-18 10:22:07

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

回复收藏 0 原文

邮友 2024-12-18 10:22:07

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

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

回复收藏 0 原文

红ご颜醉 2024-12-18 10:22:07

我用这些：

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

I use these:

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

回复收藏 0 原文

会发光的星星闪亮亮i 2024-12-18 10:22:07

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

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

回复收藏 0 原文

女皇必胜 2024-12-18 10:22:07

为什么不使用一些 br 呢？

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

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/

回复收藏 0 原文

~没有更多了~