0

注意：这与以前的用户提出的问题相同（但没有解决该问题）。

当从本地主机将剪辑路径应用于我在 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 个图像。我曾问过最初的提交者他的评价是什么：“这是由于浏览器错误造成的——它在某个时候在 Chrome 和 Firefox for OS X 中得到了修复。”

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

4

1 回答 1

0

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

于 2016-02-09T07:27:14.557 回答