web-dev-qa-db-ja.com

「width：-moz-fit-content;」のCSSクロスブラウザ値はありますか？

center-positionedであると同時に、コンテンツの幅に合わせるである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は、前のinlineではなくnderである必要があります。

可能なクロスブラウザソリューションを知っていますか？

cssfirefoxcss3cross-browser
67
Darme

最後に、私は単に次を使用して修正しました：

display: table;
128
Darme

MozillaのMDNは、次のようなものを提案します[ source ]：

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

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 [〜＃〜]

7
b_archer

同様のケースで私が使用した：white-space: nowrap;

5
user570605

私はこれらを使用します：

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

いくつかの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/

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