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 verison 11。

Answer 1

在IE和Firefox中，如果顶部（或底部）工作，则父级不能以％为单位。

我通过在td上添加一个5em高度来修复它（当我将高度设置为Box-center上的5em时，它的dident工作但它适用于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>

Answer 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

上：50％不会在IE中工作

2 个答案: