頂部：50％不會在IE瀏覽器工作

IE瀏覽器不會正常顯示我的CSS。我認爲這是我的頂部：50％，這是行不通的，因爲如果我將它更改爲頂部：0％是相同的。頂部：50％不會在IE瀏覽器工作

.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和鉻：http://imgur.com/a/wgLm9
我有IE verison 11.

來源

2016-02-29 Alex Tall

歡迎SO位置！請在您的問題中發佈您的HTML。謝謝！ – GibboK

謝謝！現在添加了一些HTML –

請發佈輸出HTML（您可以使用https://jsfiddle.net/或SO或類似的），它會更容易接收答案:)。如果您的問題也與服務器端技術有關，請爲您的問題添加適當的標籤。 – GibboK

在IE和Firefox父斜面具有以％表示身高，如果頂部（或底部）shuld工作。

我固定它通過增加5em的HIGHT上TD（當我設置HIGHT到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>

來源

2016-02-29 10:28:44

頂部將工作絕對

.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

來源

2016-02-29 10:50:20

頂部：50％不會在IE瀏覽器工作

回答

相關問題