Genişlik: IE10'deki sözde sınıf içeriğinden önce çalışmıyor

Question

40% genişliğine sahip olduğum bir div içinde :before içeriğim var, krom, firefox'ta harika çalışıyor ancak IE10'da denediğimde işe yaramıyor. Chrome ve ateş

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
.Table-row { 
 
    border: 0.5px solid #cccccc; 
 
} 
 
.Table-row-item { 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flexbox; 
 
    display: -ms-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row nowrap; 
 
    -moz-flex-flow: row nowrap; 
 
    -ms-flex-flow: row nowrap; 
 
    flex-flow: row nowrap; 
 
    -webkit-flex-grow: 1; 
 
    -moz-flex-grow: 1; 
 
    -ms-flex-grow: 1; 
 
    flex-grow: 1; 
 
    -webkit-flex-basis: 0; 
 
    -moz-flex-basis: 0; 
 
    -ms-flex-basis: 0; 
 
    flex-basis: 0; 
 
    word-wrap: break-word; 
 
    word-break: break-word; 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -moz-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    padding: 0.5em; 
 
} 
 
.Table-row-item:before { 
 
    content: attr(data-header); 
 
    width: 40%; 
 
    font-weight: 700; 
 
}

<div class="head"> 
 
    <div class="Table-row"> 
 
    <div class="Table-row-item" data-header="First Name">Gyandeep</div> 
 
    <div class="Table-row-item" data-header="Last Name">Singh</div> 
 
    <div class="Table-row-item" data-header="Job Title">Software Engineer</div> 
 
    </div> 
 
</div>

Çıktı: IE10 içinde

Çıktı:

Aşağıda

benim kodudur

Answer 1

::before sözde eleman, varsayılan olarak, display:inline böylece IE10/11 için display:inline-block düzeltmeleri bu ekleme etti.

Düzenleme: Neden Chrome'da çalıştığını açıklayan @Alochi'ye teşekkürler. Üst öğe, blockified olan bir esnek öğedir (yani, öğenin görüntüleme türü, üst öğe display:flex olduğundan engellenecek şekilde değiştirilmiştir).

Answer 2

See this answer to not use flex on IE10 yet

İşte IE10 üzerinde çalışan bir örnek:

See this fiddle

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 
.Table-row { 
    border: 0.5px solid #cccccc; 
} 
.Table-row-item { 
    word-wrap: break-word; 
    word-break: break-word; 
    padding: 0.5em; 
} 
.Table-row-item:before { 
    content: attr(data-header); 
    width: 40%; 
    font-weight: 700; 
    display: inline-block; 
}