在FF25和IE10中内联SVG上的1px(或更小？亚像素？)边界,而不是Chrome

Question

使用内联SVG时,我遇到了一个奇怪的问题.我创建在一个路径<svg>元素,并使用top或bottomCSS属性与relative定位叠加这个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相关,问题也会根据窗口宽度显示/消失.

Answer 1

我不确定它是否是一个舍入错误或一个svg消除锯齿的绘画问题,但我在测试中只发现以下内容在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;

我不确定的是这个解决方案可能有多么脆弱.