与桌子和桌子单元垂直对齐的替代方法

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