纸张折叠效果在 IE8 中不起作用答案

【问题标题】：Paper folded effect not working in IE8纸张折叠效果在 IE8 中不起作用
【发布时间】：2014-02-15 09:42:58
【问题描述】：

我正在研究折叠纸效果，这似乎适用于除 IE8 之外的几乎所有浏览器。

这是 JSBIN 代码：http://jsbin.com/oLepimiK/6/edit

我在 SOF 上看到了一个不同的问题，其中支持 :before 和 :after 标签，但我想我在这里遗漏了一些东西。谁能给我指出来？

我的 IE8 模式：

【问题讨论】：

你需要它是基于 css 的吗？
添加了一个解决方案，至少可以帮助你调试。

标签： html internet-explorer-8 cross-browser css

【解决方案1】：

相信box-shadow在IE8中是不支持的，所以'fold'下的阴影不会出现。

CanIUse.com

【讨论】：

【解决方案2】：

它工作正常，您在使用Z-INDEX 时遇到问题，我将顶部和左侧更改为-1。

.clear{
  padding-left: 30px;
}

.complaint:after {
  border-color: transparent #F58C1E #F58C1E   transparent;
  border-style: solid;
  border-width: 10px;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  z-index: 12;
}

.complaint:before {
  border-color: white #A65807 #A65807 white;
  border-style: solid;
  border-width: 11px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  content: "";
  left: -1px;
  position: absolute;
  top: -1px;
  width: 0;
  z-index: 11;
}

.complaint {
  background-color: #F58C1E;
  border-style: solid;
  border-width: 1px 1px 0;
  padding: 4px;
  position: relative;
}

结果：

【讨论】：

在您的屏幕截图中，您如何获得正确的选项？
我是肯定的，我会仔细检查。
好的..谢谢，你能提供最终版本的链接吗？
我在文档顶部添加了<!DOCTYPE HTML>，它工作得很好。感谢您帮助我！