Internet Explorer 上的 CSS 错误阴影效果（纸张卷曲）

Posted 2023-03-06

【中文标题】Internet Explorer 上的 CSS 错误阴影效果（纸张卷曲）

【英文标题】：CSS wrong shadow effect (paper curl) on Internet Explorer

【发布时间】：2016-12-29 20:34:56

【问题描述】：

我正在尝试像这样实现页面卷曲：

我遵循了这个例子：http://codepen.io/anon/pen/fpjoa

如果我创建新的 php 和 CSS 文件并从上面的链接复制 - 粘贴代码，结果是正确的，如预期的那样。但如果我在我的 Wordpress 网站上使用此代码，它不适用于 Internet Explorer，请看下图：

正如你在上面看到的，右边的角落出了问题。你知道为什么会发生吗？也许我应该为 IE 改变一些东西？但是为什么上面链接中的示例与 IE 一起正常工作？

我在 page-wrap 上使用 css -> content-wrapper 类如下：

.page-wrap .content-wrapper 
    position: relative;  
    background: white;/* #f0ab67;*/
    border:1px solid lightgray;
    padding: 50px;
    margin: 0 auto 20px auto;  

.page-wrap .content-wrapper:before, 
.page-wrap .content-wrapper:after 
    position: absolute;
    width: 48%;
    height: 10px;
    content: ' ';
    left: 20px;
    bottom: 40px;      
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;

    -webkit-transform: skew(-5deg) rotate(-3deg);
    -moz-transform: skew(-5deg) rotate(-3deg);
    -ms-transform: skew(-5deg) rotate(-3deg);
    -o-transform: skew(-5deg) rotate(-3deg);
    transform: skew(-5deg) rotate(-3deg);
    -webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    z-index: -1;

.page-wrap .content-wrapper:after 
    left: auto;
    right: 20px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: skew(5deg) rotate(3deg);
    -moz-transform: skew(5deg) rotate(3deg);
    -ms-transform: skew(5deg) rotate(3deg);
    -o-transform: skew(5deg) rotate(3deg);
    transform: skew(5deg) rotate(3deg);

注意：我使用的是 Sydney 主题。

【问题讨论】：

“但为什么上面链接中的示例可以在 IE 上正常工作？” - 嗯，因为您的网站上/关于您的网站有些不同。但是，如果没有您向我们展示您的网站，或者至少是 minimal reproducible example 使问题可重现，我们就无能为力了。

哦，可怜的你。 -1。不是来自我。接受我的 +1。

【参考方案1】：

CBroe 怎么说，没有例子很难。但也许这个解决方案对你有用：

.test 
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 150px;
  border: 1px solid #ccc;
  background: #fff;


.test:before 
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 12px;
  width: 45%;
  height: 20px;
  background: #777;
  -webkit-box-shadow: 0 15px 19px #aaa;
  -moz-box-shadow: 0 15px 19px #aaa;
  box-shadow: 0 15px 19px #aaa;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);


.test:after 
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 12px;
  width: 45%;
  height: 20px;
  background: #777;
  -webkit-box-shadow: 0 15px 19px #aaa;
  -moz-box-shadow: 0 15px 19px #aaa;
  box-shadow: 0 15px 19px #aaa;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);

<div class="test">Test</div>