มีค่า css cross-browser สำหรับ "width: -moz-fit-content;" หรือไม่

ฉันต้องการให้ 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 ถัดไปควรอยู่ภายใต้และไม่อยู่ในบรรทัดก่อนหน้า

คุณรู้จักโซลูชันข้ามเบราว์เซอร์ที่เป็นไปได้หรือไม่?

ในที่สุดฉันก็แก้ไขได้ง่ายๆโดยใช้:

display: table;

MDN ของ Mozilla แนะนำสิ่งต่างๆเช่น [ แหล่งที่มา ] ต่อไปนี้:

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

ในกรณีที่คล้ายกันฉันใช้: white-space: nowrap;

มีประกาศเดียวที่แก้ไขปัญหานี้สำหรับ 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

ฉันใช้สิ่งเหล่านี้:

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

ทำไมไม่ใช้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/