使用内联SVG时,我遇到了一个奇怪的问题.我正在< svg>中创建一个路径元素并使用具有相对位置的顶部或底部CSS属性将此SVG叠加在前一个元素上,以在该部分上获得酷炫的“剪切”效果.
这完全适用于Chrome,但在IE10和FF25中,我在SVG的右侧和顶部获得了这个“透明”边框.我把’透明’放在引号中,因为据我所知它是透明的,因为它显示在它下面的明亮的绿色背景.这是一个截图,指向我看到的确切位置(截图来自FF25)：
我最初从Codrops获得了分隔符建议.
在此测试页面中,标题为“SVG Trouble Section”的部分是有问题的部分.
有没有办法解决这个问题,所以我的技术可以很好地跨浏览器？或者有更好的方法来达到我想要的效果吗？谢谢！
更新1：
通过更多测试,我发现有时在Firefox中滚动时,顶部幻像“边框”消失并且不会返回.甚至在重新加载页面之后.我不确定是什么导致它消失,它不是问题的一部分,只是一个异常现象.
更新2：
我已经做了一些额外的测试,通过删除元素来查看可能触发的内容以及删除注释后,“SVG故障部分”上方的几个部分和页脚,边框现在已移至底部分隔符.这是没有页脚的页面：http://ignitepixels.com/sandbox/svg/sample.html
更新3：
我创造了一个小提琴,我在其中复制了这个问题.这应该使更容易的故障排除：http://jsfiddle.net/fmpeyton/NuneR/
由于你无法在jsfiddle中保存特定的面板大小,我附上了一个大概的大小的屏幕截图,我可以用Firefox 25重现这个问题：
可能与Update 1相关,问题也会根据窗口宽度显示/消失.
