Question

在我正在处理的网络项目中，我们使用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

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

无法从Microsoft Edge和IE中的伪元素读取边框样式

1 个答案: