在我正在处理的网络项目中,我们使用JavaScript来渲染大而复杂的网页。我们目前正在开发一种方法,能够将部分页面移动到另一个选项卡/将内容作为字符串发送,并在另一台计算机/浏览器上呈现与原始页面相同的内容。
我们可以使用相同的脚本来重新呈现页面,但重新呈现性能是最重要的,因此我们希望避免它。因此,我们的方法是迭代相关元素,并使用getComputedStyle()将元素与当前样式一起抽象出来。这种方法效果很好,但我们遇到了一些问题,包括伪元素。
要包含它们,我们已经使用
获得了样式 getComputedStyle(element, ':after');
适用于Chrome。但是,在IE和Microsoft Edge中,这仅适用于大多数情况。一个不起作用的情况是伪元素是否有边框。然后边界样式不包含在函数返回的CSSStyleDeclaration中。
所以我的问题是:
在fiddle中复制错误的最小示例。点击Chrome输出按钮
border-bottom: 1px solid rgb(255, 0, 0)
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: solid
border-bottom-width: 1px
边缘输出:
border-bottom:
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: none
border-bottom-width: 1px
答案 0 :(得分:1)
我相信你现在已经用另一种方式解决了......但是今天问题仍然存在于Edge;这是一个解决它的方法。
问题是,border-style
IE返回父元素值而不是伪元素,所以如果你在那里设置样式,并且没有宽度,则伪元素将继承它。从你的小提琴中提取到例子......
#pseudo-element-test-id {
position: relative;
border-bottom: 0 solid;
}
#pseudo-element-test-id::after {
position: absolute;
top: 15px;
left: 0;
content: " ";
width: 150px;
border-bottom: 1px solid red;
}