Có giá trị trình duyệt chéo css nào cho “width: -moz-fit-content;” không?

Tôi cần một số div được đặt ở vị trí trung tâm và đồng thời vừa với chiều rộng nội dung của chúng .

Bây giờ tôi đang làm nó như thế này:

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

Bây giờ, lệnh cuối cùng "width: -moz-fit-content;" là chính xác những gì tôi cần!

Vấn đề duy nhất là .. nó chỉ hoạt động trên Firefox.

Tôi cũng đã thử với "display: inline-block;" , nhưng tôi cần những div này để hoạt động như div. Cụ thể là, mọi div tiếp theo phải nằm dưới chứ không phải nội tuyến , div trước.

Bạn có biết bất kỳ giải pháp trình duyệt chéo nào khả thi không?

Cuối cùng, tôi đã sửa nó chỉ bằng cách sử dụng:

display: table;

MDN của Mozilla đề xuất một cái gì đó như sau [ nguồn ]:

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

Trong trường hợp tương tự, tôi đã sử dụng: white-space: nowrap;

Có một khai báo duy nhất sửa lỗi này cho Webkit, Gecko và Blink không? Không. Tuy nhiên, có một giải pháp trình duyệt chéo bằng cách chỉ định nhiều giá trị thuộc tính chiều rộng tương ứng với quy ước của mỗi công cụ bố cục.

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

Phỏng theo: MDN

Tôi sử dụng:

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

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

Tại sao không sử dụng một số 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;
}

Ví dụ: http://jsfiddle.net/YZV25/