イベントトラッカーのフレックスを表示する別の方法

Question

現在、htmlとcssを使用してイベントトラッカーを作成しています。私の問題は、ブラウザの互換性の問題のためにdisplay: flex;に乗りたいと思うことです。同じ結果を達成するための選択肢はありますか？ flexせずにすべてのステップが別の行に入っていたので、私はdisplay:inline-blockを使って試しました。

HTML：

<div class="container"> 
    <div class="row event"> 
    <div class="col-xs-3 event-step"> 
     <p class="event-stepnum">Step 1</p> 
     <div class="progress"> 
      <div class="progress-bar"></div> 
     </div> 
    </div> 
    <div class="col-xs-3 event-step complete"> 
     <p class="event-stepnum">Step 2</p> 
     <div class="progress"> 
      <div class="progress-bar"></div> 
     </div> 
    </div> 
    <div class="col-xs-3 event-step"> 
     <p class="event-stepnum">Step 3</p> 
     <div class="progress"> 
      <div class="progress-bar"></div> 
     </div> 
    </div> 
    </div> 
</div> 

はCSS：

.event > .event-step { 
    padding: 0; 
    position: relative; 
} 

.event > .event-step .event-stepnum { 
    color: #595959; 
    font-size: 16px; 
    margin-bottom: 5px; 
} 

.steps .step-on, 
.steps .step-done { 
    background-color: #1b7e28; 
    color: #1b7e28; 
    border: 1px solid transparent; 
} 

.progress { 
    position: relative; 
    border-radius: 0px; 
    height: 5px; 
    box-shadow: none; 
    margin: 20px 0; 
} 

.progress > .progress-bar { 
    width: 0px; 
    box-shadow: none; 
    background: #fbe8aa; 
} 

.event-step.complete > .progress > .progress-bar { 
    width: 100%; 
} 

.row { 
    display:flex; 
} 

JSFiddle Demo

Answer 1

だけdisplay:inline-blockでdisplay:flexを交換し、あなたのステップは、固定幅のdiv与える：

.event > .event-step { 
    padding: 0; 
    position: relative; 
    width: 200px; 
} 
.row { 
    display: inline-block; 
} 

https://jsfiddle.net/onk2cqhg/