幅：for IE10の擬似クラスの内容が動作しない前に

Question

40%の幅を指定したdiv内には:beforeというコンテンツがあります。これはChrome、Firefoxでうまく動作しますが、IE10で試してみるとうまくいきます。 ChromeとFirefoxで

*, 
 
*: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>

出力：IE10で

出力：

以下

は私のコードです

Answer 1

::before擬似要素は、デフォルトでは、display:inlineはそうIE10/11用display:inline-block修正これを追加しました。

編集： なぜChromeで動作するのかを説明する@Alochiに感謝します。親要素はフレックスアイテムであり、blockifiedです（つまり、親がdisplay:flexであるため、要素の表示タイプがブロックに変更されます）。

Answer 2

See this answer to not use flex on IE10 yet

はここでIE10に取り組ん例です：

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; 
}