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不喜欢Pseudo元素。所以我试过了：

.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;
}

然后我把它添加到那里作为一个半透明的三角形来绕过IE讨厌一切，但遗憾的是，它不能正常工作。它只是将三角形显示为纯白色三角形。

有什么想法吗？

jsfiddle（似乎没有显示小提琴中的IE问题）

Live site（这会显示问题）

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

Answer 1

如果这是您需要的，那么半透明三角形似乎并未真正显示在页面的背景中。对于该效果，也许尝试使用:before和:after伪元素创建两个直角三角形，其中边框颜色与列表的背景颜色匹配。例如：

.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。除此之外没有测试。

IE10不使用rgba三角形或：三角形之前/之后

1 个答案: