我正在尝试使用 CSS clip
和 clip-path
为单页网站布局显示 float 寻呼机导航的属性。我试图让导航根据它是在深色还是浅色背景上改变颜色。您可以在 Firefox 中查看预期结果 http://dannymcgee.net/redesign .我还在 http://dannymcgee.net/dev/clipnav-prototype/ 上用更简洁、更轻量级的代码复制了导航和容器。用于故障排除。
这是为具有不同背景颜色的每个部分构建标记的方式:
<section>
<div class="clipper">
<ul class="nav">
...
</ul>
</div>
<article class="content">
...
</article>
</section>
这整个 section
每次背景改变时都会重复。每个section
相对定位。 .clipper
样式如下:
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
clip: rect(auto,auto,auto,auto);
clip-path: inset(0 0 0 0);
.nav
剪刀内部是 position: fixed
从页面顶部开始,有 backface-visibility: hidden
.
效果基本上与我希望在 Firefox 中完全一样,但在 Chrome 和 IE 中存在错误。在 Chrome 中,背景图像表现得很奇怪,并且导航在第一部分之后不可交互。在 IE 中,导航根本不会出现在第一部分之后。我已经看到这个完全相同的设置在 Chrome 和 IE 中正常工作 here (实际上,我在 an old StackOverflow thread 上找到了我无法评论的链接),所以我知道这是可能的,我只是无法弄清楚他们在做什么不同。如果我能找到某种 shim Javascript 或 jQuery 解决方案,我会非常满意,但这似乎是一个非常不寻常的案例场景,我什至不确定从哪里开始寻找。
最佳答案
经过大量的故障排除后,我已经解决了问题。基本上,clip
和/或 clip-path
在 Chrome 和 IE 中非常脆弱。大多数问题是由于在固定的 nav
中定位元素引起的。一旦我删除了 .nav
中所有内容的所有 position
声明,它在 Chrome 中的大部分功能就如预期的那样。 IE 可能是一个失败的原因,所以我必须为它设计一个回退。
警告:将 CSS3 转换应用于 .clipper
内的任何内容似乎会破坏 Chrome 中第三个 部分
的 background-attachment: fixed
.不知道为什么,但只需为 Chrome 禁用这些效果就足够容易了。
关于html - 固定导航上的 CSS 剪辑/剪辑路径在 Chrome 和 IE 中不合作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29482843/