Firefox上的疯狂CSS剪切路径错误 [英] Insane CSS Clip Path Bug on Firefox
问题描述
我正在尝试从 http://www.smashingmagazine.com/2015/05/creating-response-shapes-with-clip-path/，而且我有这个疯狂的错误.简而言之，该代码可同时在CodePen和JSFiddle上运行，但无法在我的本地/应用程序上运行.
I'm trying out CSS Clip Path from http://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/, and I have this insane bug. In a nutshell, the code works on both CodePen and JSFiddle, but it fails to work on my local/app.
这是我要想出的多边形的代码.首先是CSS:
Here's the code for the polygon I was trying to come up with. First the CSS:
nav {
position: fixed;
bottom: 0;
background: #BE0F16;
color: #fff;
width: 100%;
padding: 2rem 1rem;
text-align: right;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
-webkit-clip-path: url("#clip-shape");
clip-path: url("#clip-shape");
}
nav .next-chapter {
color: #fff;
padding-left: 1rem;
}
这是相关的HTML:
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="css.css" rel="stylesheet" />
</head>
<body>
<nav>
<a class="menu"><i title="Menu" class="fa fa-bars"></i><h1 class="visuallyhidden">Menu</h1></a>
<a class="next-chapter" href="/<%=next%>"><i title="Next Chapter" class="fa fa-hand-o-right"></i><span class="visuallyhidden">Next Chapter</span></a>
<a id="comment" href="http://twitter.com/?status=@uebyn"></a>
</nav>
<svg width="0" height="0">
<defs>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0 1, 1 1, 1 .5" />
</clipPath>
</defs>
</svg>
<script src="script.js"></script>
</body>
</html>
当我打开index.html(上面的HTML)时，它显示的是矩形，而不是我期望的多边形.但是，我遵循了文章中所述的确切说明.
When I open the index.html (the above HTML), it shows a rectangle instead of the polygon I was expecting. Yet I followed the exact instructions as is stated on the article.
然后我将代码复制到CodePen( http://codepen.io/anon/pen/JdwrQw )和JSFiddle( http://jsfiddle.net/yk95wxmL/)， 在同一浏览器上 ，它可以正常工作.
Then I copy over the code to CodePen (http://codepen.io/anon/pen/JdwrQw) and JSFiddle (http://jsfiddle.net/yk95wxmL/), on the same browser, and it works.
我一生都无法理解. Firefox可以理解CodePen和JSFiddle上的同一代码上的CSS剪切路径，而我的HTML上却不可以吗?可以肯定的是，我将整个HTML复制到了Codepen，并且CSS剪辑路径有效.这完全超出了我.如果有人能提出一个显而易见的建议，但我却以某种方式错过了，我将非常感激.
I cannot for my life understand this. Firefox understands and does css clip path on the same code on CodePen and JSFiddle, but not on my HTML? To be sure, I copied my entire HTML over to Codepen, and css clip path works. This is totally beyond me. If someone can just come up with a suggestion that is perhaps glaringly obvious but I somehow missed it, I will be most thankful.
推荐答案
假设CSS在单独的文件中，即编写时为css.css.
Assuming the css is in a separate file i.e. css.css when you write
clip-path: url("#clip-shape");
实际上是
clip-path: url("css.css#clip-shape");
但是文件css.css中没有ID为clip-shape的元素(所有元素都在html文件中).
But the file css.css does not have an element with an id of clip-shape (all the elements are in the html file).
您需要写
clip-path: url("<the name of the html file goes here>#clip-shape");
很显然，如果您使用jsfiddle，那么所有内容都将放在同一文档中，因此您不会在此看到此问题.
Obviously if you use jsfiddle everything goes in the same document so you don't see this issue there.
这里没有Firefox错误.
There's no Firefox bug here.
这篇关于Firefox上的疯狂CSS剪切路径错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
