宽度为：之前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伪类内容不工作

回答

相关问题