IE10：悬停时两个div并排

Question

我有一个div和一个hover_div。在hover_div上，我有两个divs，我希望它们不是并排上下。它在 IE11 中工作正常但在 IE10 中没有。

如何在 IE10 中解决此问题。

.main_div{
  width:160px;
  height:160px;
  border:thin black solid;
  padding:5px;
  position:relative;
  
  /* Firefox */
  display:-moz-box;
  -moz-box-orient:horizontal;
  -moz-box-pack:center;
  -moz-box-align:center;

/* Safari and Chrome */
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack:center;
  -webkit-box-align:center;

/* W3C */
  display:box;
  box-orient:horizontal;
  box-pack:center;
  box-align:center;

  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient:horizontal;

}

.main_div .hover_div{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  display: none;
  
}

.main_div .hover_div .upload_btn{
background: white;
            padding: 3px 20px;
            color: #58666e;
            margin: 8px 0;
            
}

.main_div:hover .hover_div{
 /* Firefox */
  display:-moz-box;
  -moz-box-orient:horizontal;
  -moz-box-pack:center;
  -moz-box-align:center;

/* Safari and Chrome */
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack:center;
  -webkit-box-align:center;

/* W3C */
  display:box;
  box-orient:horizontal;
  box-pack:center;
  box-align:center;

  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient:horizontal;

}

<div class="main_div">
     <div class="hover_div">
         <div class="upload_btn cursor_pointer">
              <span>xyz</span>
         </div>
         <div class="upload_btn">
              <span>abc</span>
         </div>
     </div>
</div>

我使用了从box-orient到horizontal的{​​{1}}属性值。

但它无法在 IE10

中使用

任何帮助都是一样的。

谢谢。