與桌子和桌子單元垂直對齊的替代方法

Question

我有這支筆： http : //codepen.io/helloworld/pen/VYWGbz

我在生產代碼中設置了這些類，它們使IE 11在打開抽屜時不會以某種方式呈現左黑色邊框。

當我刪除以table / table-cell作為顯示屬性的垂直對齊方式時，錯誤消失了（在Chrome中很好...）

我還有什么選擇可以垂直對齊抽屜的glyphicon / span，而不是使用父級上的表格和子級上的表格單元格來使中間對齊？

注意：抽屜/側邊欄始終為其父級接收的高度為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

Answer 2

您可以使用transformY和相對位置。

.drawer-left-trigger > span{
  transition: all .35s ease-in-out;
  transform: rotate(180deg) translateY(-50%);
  position: relative;
  top: 50%;
}

如果.drawer-wrapper是頁面上唯一的元素，請考慮通過將其高度設置為100％而不是500px來添加

html,body,.drawer-wrapper {
  height: 100%;
}

如果需要在頂部添加一些導航欄，請通過calc（100％-50px）計算抽屜的高度，其中50px是導航欄的高度。

工作版本http://codepen.io/antraxis/pen/yyoNpg