顶部：50% 无法在 IE 中工作答案

【问题标题】：Top:50% wont work in IE顶部：50% 无法在 IE 中工作
【发布时间】：2016-02-29 06:54:53
【问题描述】：

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。

【问题讨论】：

欢迎来到 SO!。请在您的问题中发布您的 HTML。谢谢！
谢谢！现在添加了一些html
请张贴输出的HTML（你可以使用jsfiddle.net或SO或类似的），这样会更容易收到答案:)。如果您的问题也与服务器端技术有关，请在您的问题中添加适当的标签。

标签： html css internet-explorer

【解决方案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>

【讨论】：

【解决方案2】：

top 将使用绝对位置

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

Helpful Link

【讨论】：