css - 剪辑路径仅适用于第一个对象；导致他人消失

Question

注意:这是 same issue由以前的用户提出(但是没有解决该问题)。

当从本地主机将剪辑路径应用于我在 Chrome 上运行的网页上的图像时，它仅适用于第一个对象。其余图像(对象)完全消失。 但是，相同的代码在运行 jsfiddle 时工作正常. 这是 CSS:

.art1 > .pic1{
  width:60px;
  height:60px;
  float: left;
  shape-margin: 4px;
  shape-outside: circle(40% at 50% 50%);
  -webkit-clip-path: circle(40% at 50% 50%);
  margin-left: -1em; 
}

 .art2 > .pic2{
  width:60px;
  height:60px;
  float: left;
  shape-margin: 4px;
  shape-outside: circle(40% at 50% 50%);
  -webkit-clip-path: circle(40% at 50% 50%);
  margin-left: -1em; 

}

.art3  > .pic3{
  width:60px;
  height:60px;
  float: left;  
   shape-margin: 4px;
  shape-outside: circle(40% at 50% 50%);
  -webkit-clip-path: circle(40% at 50% 50%);
  margin-left: -1em; 
}

这jsfiddle是使用我网页上使用的完全相同代码的问题演示。它显示了三个相同的 div，并且圆形剪辑路径在所有 4 个图像上都有效。我问过原始提交者他的评价是什么:“这是由于浏览器错误引起的——它在某些时候已在适用于 OS X 的 Chrome 和 Firefox 中得到修复。”

然而，我使用的是最新版本的 Chrome，当从我的本地主机运行时它出现了这个问题。有什么办法可以解决这个问题吗？

Answer 1

当我在我的系统上的 Chrome、Firefox 和 IE 上再次尝试这个 jfiddle 时，它​​出现了同样的问题，当我在我的手机上尝试 chrome 时，它​​起作用了。我的结论是，问题可能是由操作系统引起的——我在笔记本电脑上运行 Windows 7。