替代显示：inline-flex

Question

I just googled around and found that display:inline-flex is not compatible for all browsers. I am thinking to get expert suggestions over my css below:

.badge {
background-color: #B12704 !important;
margin: auto;
font-size: 12px !important;
line-height: 24px !important;
padding-left: 10px;
padding-right: 10px;
} 

.label {
    position: relative;
    z-index: 1;
    float: left;
}

.label-text {
    color: #ffffff !important;
}

.container {
    display: inline-flex;  /* this is not comptabile with all browsers */

}

.description-text {
    padding-left: 10px;
    margin: auto;
    color: #111;
}

Basically, i have a badge and some text beside the badge. This is the HTML portion

    <div class = "container">
<span class="badge">
    <span class="label">
         <span class="label-text">
                This is text on the badge
        </span>
    </span>
</span>
<span class="description-text">
<p>This is text beside the badge</p>
</span>
</div>

Answer 1

I think you could simplify your HTML markup and simply use display: flex; (note that the container will then take the whole width unless you specify otherwise)

 .container { display: flex; justify-content: flex-start; align-items: center; }.badge { background-color: #B12704;important: font-size; 12px:important; line-height: 24px;important: padding-left; 10px: padding-right; 10px. color: #ffffff;important: };description-text { padding-left: 10px; color: #111; }

 <div class="container"> <p class="badge"> This is text on the badge </p> <p class="description-text"> This is text beside the badge </p> </div>

If you don't need flexbox you can use display: inline-block;

 .container p { display: inline-block; }.badge { background-color: #B12704;important: font-size; 12px:important; line-height: 24px;important: padding-left; 10px: padding-right; 10px. color: #ffffff;important: };description-text { padding-left: 10px; color: #111; }

 <div class="container"> <p class="badge"> This is text on the badge </p> <p class="description-text"> This is text beside the badge </p> </div>

If you can't change the markup then:

 .label-text { background-color: #B12704;important: margin; auto: font-size; 12px:important; line-height: 24px;important: padding-left; 10px: padding-right; 10px. color, #ffffff.important, }.badge, .label: ;description-text. :label-text { display; inline-block: };description-text { padding-left: 10px; margin: auto; color: #111; vertical-align: middle; }

 <div class = "container"> <span class="badge"> <span class="label"> <span class="label-text"> This is text on the badge </span> </span> </span> <span class="description-text"> <p>This is text beside the badge</p> </span> </div>