css - IE10 不适用于 rgba 三 Angular 形或 :before/after triangles

Question

我刚刚注意到一个仅在 IE10 中发生的问题，在 IE9 中有效，但我无法确切地指出发生了什么。我在我的网站上使用了很多 rgba 元素，IE10 似乎可以很好地运行它们。它遇到的唯一问题是处理这样的事情:

.links:before {
  content: "";
  border-left: 105px solid transparent;
  border-right: 105px solid transparent;
  border-bottom: 25px solid rgba(255, 255, 255, 0.77);
  bottom: 0;
  left: 0;
  position: absolute;
}

然后我想也许是因为 IE10 不喜欢的伪元素。所以我尝试了:

.linkTri {
  border-left: 105px solid transparent;
  border-right: 105px solid transparent;
  border-bottom: 25px solid rgba(255, 255, 255, 0.77);
  bottom: 0;
  left: 0;
  position: absolute;
}

然后我只是将它添加到那里作为一个半透明的三 Angular 形来绕过 IE 讨厌一切，但遗憾的是，它并没有那么好用。它只是将三 Angular 形显示为实心白色三 Angular 形。

有什么想法吗？

jsfiddle (似乎没有在 fiddle 中显示 IE 问题)

Live site (这会显示问题)

我也刚刚尝试了 opacity: 0.77; 但同样的问题:/

Answer 1

如果您需要的话，半透明三 Angular 形似乎并没有真正显示到页面背景中。为了达到这种效果，也许可以尝试使用 :before 和 :after 伪元素创建两个直 Angular 三 Angular 形，其中边框颜色与列表的背景颜色相匹配。例如:

.links:before,
.links:after {
  content: "";
  position: absolute;
  bottom: -25px;
  border: solid #c7c7c7;
}

.links:before {
  left: 0;
  border-width: 25px 105px 0 0;
  border-right-color: transparent;
}

.links:after {
  right: 0;
  border-width: 25px 0 0 105px;
  border-left-color: transparent;
}

如果您不介意左右不显示虚线边框，您可以尝试这样的操作:DEMO . (如果需要该样式，您可以将列表包装在另一个元素中，并相应地设置样式。)

适用于 Chrome、Firefox、IE9、IE10。没有进行超出此范围的测试。