我在 IE9、10、11 中遇到一个问题,其中一个 ::after
伪元素不会填充其高度的 100% td
parent 。
如果第二行的第一列有两行文本,伪元素会毫无问题地填满整个高度。所以,我认为问题的发生是因为 td
没有填充 tr
的高度但事实并非如此。
第一张截图是Chrome,第二张是IE9
HTML
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
CSS
table td {
border-bottom: 1px solid;
}
table td:first-child {
position: relative;
}
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 100%;
display: block;
background-color: orange;
}
代码笔:http://codepen.io/cbier/full/BjpaqB/
P.S. 我正在使用 ::after
出于特殊原因使用伪元素而不是边框,这是一个要求
谢谢!
最佳答案
可以为整个表格使用一个伪元素吗?
table {
overflow: hidden;
}
table td {
border-bottom: 1px solid;
}
table tr:first-child td:first-child {
position: relative;
}
table tr:first-child td:first-child:after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 1000px;
display: block;
background-color: orange;
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
另一种方式,背景:线性渐变
table td {
border-bottom: 1px solid;
}
table td:first-child {
background-image: linear-gradient(270deg, orange 3px, transparent 3px);
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
关于css - IE 表格单元格上的 100% 高度伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34552882/