1

我刚刚注意到一个仅在 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;
}

然后我只是将它作为一个半透明的三角形添加到那里，以绕过 IE 讨厌的一切，但遗憾的是，它并没有很好地工作。它只是将三角形显示为纯白色三角形。

有任何想法吗？

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

实时站点（这将显示问题）

我也刚试过opacity: 0.77;但同样的问题：/

4

1 回答 1

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

于 2013-09-27T08:42:49.973 回答