使用内联SVG时，我遇到了一个奇怪的问题。我在<svg>元素中创建一个路径，并使用top定位的bottom或relative 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相关，问题根据窗口宽度显示/消失好。
我不确定它是否是舍入错误或svg抗锯齿绘画问题，但我在测试（see example）中只发现以下内容在Firefox和IE10上一致地工作：
将两个SVG路径更改为此
请注意在两个地方添加额外的.1
<path class="white" d="M0 100 L50 0 L100.1 100 L100.1 0 L0 0 L0 100 Z"></path>
更改这些元素的top / bottom偏移量
将补偿从-20px更改为-19.5px
将其添加到.separator
height: 20px;
overflow: hidden;
我不确定的是这个解决方案可能有多么脆弱。
另一种解决方法是将以下规则添加到section.green。
border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
我有一个svg图形的类似问题，我在其上使用了tweenmax js。只有在铬合金我才有一个闪烁的边框。我尝试了上面推荐的解决方案，但它没有改变任何东西。
所以我找到了这篇文章：Prevent flicker on webkit-transition of webkit-transform
关键是：-webkit-backface-visibility：hidden;
我希望这能帮助有人解决同样的问题。干杯:)