有没有人知道如何修复(明显的)IE渲染错误:在/之前/:在高度之后？
从它的外观来看,IE似乎只想到一个:before /:之后的伪元素和父元素<TD>里面的内容一样高.如果<TD>#1是x2行高w内容而<TD>#2只有x1行内容,IE将只渲染:在<TD>#2 之前的/之后:高度与x1行的内容价值一样高.
我在这里创建了一个小提琴示例,以便更好地说明我的问题:http: //jsfiddle.net/231gnfpz/ 注意:我添加了一个红色背景:before /:after以更好地帮助在IE中可视化我的问题
在我的例子中,我有一个中间<TD>我应用了:在/之后尝试在特定列的外部创建一个box-shadow.它是一个旧项目,所以我没有权限重写整个表格,FireFox/Chrome似乎没有问题,IE8-11似乎与我有同样的问题:之前/:有一个高度:100% .
码:
table {
background: grey;
width: 100%;
}
table td {
text-align: center;
vertical-align: top;
background: white;
padding: 4px;
width: 33.33%;
position: relative;
}
.testTD:before {
box-shadow: -15px 0 15px -15px grey inset;
content: " ";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
background: Red;
}
.testTD:after {
z-index: 1;
box-shadow: 15px 0 15px -15px …