Html 固定导航上的CSS剪辑/剪辑路径在Chrome和IE中不配合

我试图使用CSS

clip

和

clip path

属性来显示单页网站布局的浮动寻呼机导航。我正试图让导航根据它是在深色还是浅色背景上改变颜色。您可以在Firefox中看到预期结果。我还复制了nav和容器，并在处使用了更干净、更轻的代码，以便进行故障排除

这是使用不同背景颜色为每个部分构建标记的方式：

<section>

  <div class="clipper">
    <ul class="nav">
      ...
    </ul>
  </div>

  <article class="content">
    ...
  </article>

</section>

裁剪器内的

.nav

位于页面顶部的

位置：固定

，并且具有

背面可见性：隐藏

---

这种效果基本上和我在Firefox中希望的一样，但在Chrome和IE中有缺陷。在Chrome中，背景图像表现得很奇怪，导航在第一部分之后无法交互。在IE中，导航根本不会出现在第一部分之后。我已经在Chrome和IE中看到了完全相同的设置正确运行（事实上，我在上面找到了我无法评论的链接），所以我知道这是可能的，我只是不知道他们有什么不同。如果我能找到某种ShimJavaScript或jQuery解决方案，我会非常满意，但这似乎是一个非常不寻常的情况，我甚至不确定从哪里开始寻找

经过大量的故障排除，我解决了这个问题。基本上，

clip

和/或

clip path

在Chrome和IE中非常脆弱。大多数问题都是由于将元素放置在固定

nav

中造成的。一旦我删除了

.nav

中所有内容的

位置

声明，它的功能基本上与Chrome中的预期一致。IE可能已经失败了，所以我必须为它设计一个后备方案

---

警告：将CSS3转换应用于

中的任何内容。clipper

似乎打破了Chrome中第三个

部分的
背景附件：修复了
。不知道为什么，但只需为Chrome禁用这些效果就很容易了。
对我有效的方法是创建一个类，其唯一目的是剪切部分（在本例中是标题）


.clip路径头{
剪辑路径：多边形（0,100%0,100%80vh,0,100%）；
}
非常奇怪，我打开了Chrome和Firefox，看不到问题所在。不过，我正在使用OSX。史蒂夫，谢谢你提供的信息，我目前没有Mac电脑可供测试。要明确的是，即使滚动过顶部部分，导航是否仍保持可交互（即，您可以将鼠标悬停在导航元素上，它们也可以适当地设置动画）？有趣！在FireFox上，交互是完全正常的，但是在Chrome上，nav元素没有动画效果，也不像最后两个部分中的链接，Contact和About。我将使用一些属性，看看是否有任何东西可以修复。我找不到任何东西，但我确实注意到Bella Fuchsia站点中的标记在每个导航副本中使用完全相同的元素。您在代码中尝试过这种方法吗？是的。上面的“重新设计”链接写得有点草率（因为我没有提前做好计划），但我确实为我重建的原型中的每个部分/clipper/nav使用了完全相同的标记：不幸的是，仍然没有骰子！剪辑路径在IE中根本不起作用，所以这是一个原因（不受支持）。
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
clip: rect(auto,auto,auto,auto);
clip-path: inset(0 0 0 0);