寬度爲：之前IE10僞類內容不工作

我有:before內的div內的內容，我給了它的寬度爲40%，它在鉻，firefox中工作得很好，但是當我在IE10中嘗試時它不起作用。寬度爲：之前IE10僞類內容不工作

下面是我的代碼：

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

輸出在Chrome和Firefox：

輸出在IE10：

來源

2016-03-21 Gyandeep

我不明白'before'的用法，你不能用padding做這個嗎？我沒有IE 10，但你可以嘗試設置'flex-shrink'爲0 – Huangism

這是一個簡單的用例，在實際使用情況下，我在小型屏幕的媒體查詢之前做過，否則它的行爲如同表格。我應該把哪些類放在flex-shrink？ – Gyandeep

把它放在寬度的元素上，在你的情況下是'before' psuedo元素 – Huangism

的::before僞元素已經在默認情況下，display:inline因此增加display:inline-block修復了這個爲IE10/11。

編輯： 感謝@Alochi解釋了它在Chrome中的工作原理。父元素是一個flex-item，它是blockified（即元素的顯示類型由於父項爲display:flex而更改爲塊）。

來源

2016-03-21 15:36:36 andyb

非常感謝@andyb你拯救了我的一天。 – Gyandeep

這將是因爲之前的僞元素將被視爲Chrome中的flex-item。 Flex項目應該[blockified]（https://www.w3.org/TR/css-display-3/#blockify） – Alohci

非常有用，謝謝@Alohci。我已經編輯了你的解釋到答案中 – andyb

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

來源

2016-03-21 15:36:15

寬度爲：之前IE10僞類內容不工作

回答

相關問題