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

Question

在我正在处理的一个 Web 元素中，我们使用 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 返回父元素值而不是伪元素，所以如果你在那里设置样式，并且没有给它宽度，伪元素将继承它。从您的 fiddle 中提取示例...

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