[firefox] Is there a css cross-browser value for "width: -moz-fit-content;"?

I need some divs to be center-positioned and to fit their content width at the same time.

I am now doing it like this:

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

Now, the last command "width: -moz-fit-content;" is exactly what I need!

Only problem is.. it works only on Firefox.

I also tryed 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?

This question is related to firefox css cross-browser

The answer is


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


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

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/


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

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


I use these:

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

Examples related to firefox

Drag and drop menuitems Class has been compiled by a more recent version of the Java Environment Only on Firefox "Loading failed for the <script> with source" Selenium using Python - Geckodriver executable needs to be in PATH Selenium using Java - The path to the driver executable must be set by the webdriver.gecko.driver system property How to use the gecko executable with Selenium Selenium 2.53 not working on Firefox 47 Postman addon's like in firefox Edit and replay XHR chrome/firefox etc? How to enable CORS on Firefox?

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to cross-browser

Show datalist labels but submit the actual value Stupid error: Failed to load resource: net::ERR_CACHE_MISS Click to call html How to Detect Browser Back Button event - Cross Browser How can I make window.showmodaldialog work in chrome 37? Cross-browser custom styling for file upload button Flexbox and Internet Explorer 11 (display:flex in <html>?) browser sessionStorage. share between tabs? How to know whether refresh button or browser back button is clicked in Firefox CSS Custom Dropdown Select that works across all browsers IE7+ FF Webkit