html - 用表格和表格单元格替代垂直对齐

Question

我有这支笔:http://codepen.io/helloworld/pen/VYWGbz

我在我的生产代码中设置了这些类，它们导致 IE 11 在打开抽屉时以某种方式不呈现左侧黑色边框。

当我删除带有表格/表格单元格的垂直对齐作为显示属性时，错误消失了......(在 Chrome 中很好......)

我还有什么选择可以垂直对齐抽屉的字形图标/跨度，而不是在父级上使用表格，在子级上使用表格单元格来使中间垂直对齐成为可能？

注意:抽屉/侧边栏的高度始终为其父级接收到的 100%。

.drawer-left-trigger{    
  display:table;
}
.drawer-left-trigger > span{   
  display:table-cell;
  vertical-align:middle;
}

HTML

<div id="idtView">
    <div style="height:100%;background:blue;" class="col-xs-3">
        test1
    </div>
    <div style="height:100%;background:yellow;"  class="col-xs-4">
       test2
    </div>
    <div id="availableSidebarColumn" style="background:orange;padding:0;height:100%;" class="col-xs-1">
        <div class="drawer-wrapper">
          <div id='drawer-left' class='closed'>
            <div class='drawer-left-trigger'>
              <span class='glyphicon glyphicon-chevron-left'></span>
            </div>
            <div class='drawer-left-content'>
              <div style="background:orange;;" id="availableCommandsPagerNavigation">
                            <span class="previous disabled glyphicon glyphicon-chevron-left availableOptionsArrow availableOptionsPagerArrow"></span>
                            <span class="glyphicon glyphicon-chevron-right availableOptionsArrow availableOptionsPagerArrow"></span>
                        </div>
                        <div style="background:gray;" id="availableCommandsContainer">
                          contentcontentcontentcontentcontentcontentcontent contentcontent content
                        </div>
            </div>
          </div>
        </div>
    </div>
    <div style="height:100%;background:pink;" class="col-xs-4">
       test2
    </div>
</div>

CSS

/*new stuff*/
*{
  box-sizing: border-box;
}
.drawer-wrapper{
  margin: 0 200px;
  display: inline-block;
}

/*The left drawer*/ 
#drawer-left{/*set a container with the total width of both the container and the trigger*/
  position: relative;
  height: 100%; width: 205px;
  overflow: hidden;
  transition: all .35s ease-in-out;
}
#drawer-left:after{/*this will the right border, when the content will be pushed out*/
  content: '';
  position: absolute;
  right: 0; top: 0;  bottom: 0;
  border-right: 1px solid #000;
}
.drawer-left-trigger{
  /*set the triggers width here, borders etc.*/
  position: absolute;
  top: 0; bottom: 0; right: 100%;
  margin-right: -25px;/*bring it back inside the wrapper*/
  width: 25px;  
  background:yellow;
  /*some styling stuff*/
  cursor: pointer;
  text-align: center;
  font-size: 24px;
  line-height: 100%;
}
.drawer-left-trigger > span{
  transform: rotate(180deg);
  transition: all .35s ease-in-out;  
}
#drawer-left.closed .drawer-left-trigger > span{
  transform: rotate(0);
}
#drawer-left.closed .drawer-left-trigger{
  /*this will push the trigger on the right side*/
  left: auto;
  right: 25px;
}
.drawer-left-content{
  /*this is the container for the header and content*/
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 24px;/*the triggers width(+-1px from the border)*/
}
#drawer-left.closed .drawer-left-content{
  /*this will push the content out*/
  left: 100%;
  right: -100%;
}
.drawer-left-trigger,
.drawer-left-content{
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  transition: all .35s ease-in-out;
}

JS

   $(function () {
       /*the left one*/
       $('.drawer-left-trigger').click(function(){
         $(this).parent().toggleClass('opened closed');
       });   

   });

Answer 1

你可以使用 FlexBox。
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

浏览器支持
http://caniuse.com/#feat=flexbox