html - 顶部 :50% wont work in IE

Question

IE 无法正确显示我的 css。我认为 Top:50% 不起作用，因为如果我将它更改为 Top:0%，它是一样的。

.box-center{
border: 0.2em solid #83BAE9;
padding-left: 0.5em;
height: 100%;
width: 100%;
display: inline-block;
}

.box-center-text{
float:left;
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%) ;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
}

img{
width:5em;
height:5em;
padding-left:0.5em;
float:right;
}

<table>

@foreach (var item in Model)                

    {
     <tr>
     <td>

     <div class="box-center">
     <div class="box-center-text">
      @Html.DisplayFor(modelItem => item.Namn) @Html.DisplayFor(modelItem => item.Efternamn)

      </div>
     <img src="@Url.Content(img.jpg)">
     </div>
     </td>
     </tr>
      }
     <h1>Test</h1> 


</table>

这是它在 IE 和 Chrome 中的样子:http://imgur.com/a/wgLm9
我有 IE 版本 11。

Answer 1

在 IE 和 Firefox 中，如果顶部(或底部)应该工作，则父项不能有百分比的高度。

我通过在 td 上添加一个 5em 的高度来修复它(当我在 Box-center 上将高度设置为 5em 时它没有工作但它适用于 4.999em)

.box-center{
border: 0.2em solid #83BAE9;
padding-left: 0.5em;
height: 100%;
width: 100%;
display: inline-block;
}

.box-center-text{
float:left;
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%) ;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
}

img{
width:5em;
height:5em;
padding-left:0.5em;
float:right;
}

td{
height:5em;
}

<table>

@foreach (var item in Model)                

{
 <tr>
 <td>

 <div class="box-center">
 <div class="box-center-text">
  @Html.DisplayFor(modelItem => item.Namn) @Html.DisplayFor(modelItem => item.Efternamn)

  </div>
 <img src="@Url.Content(img.jpg)">
 </div>
 </td>
 </tr>
  }
 <h1>Test</h1>