ie10、ie11 与 skewX 的问题（双重使用会导致渲染问题）答案

【问题标题】：ie10, ie11 issue with skewX (double use causes rendering issues)ie10、ie11 与 skewX 的问题（双重使用会导致渲染问题）
【发布时间】：2014-06-03 04:24:59
【问题描述】：

原始问题

我似乎无法弄清楚这些错误（我已经完成了正常的错误检查过程 - 验证、控制台调试等）。

不知何故，该网站在最新的浏览器（Windows 和 mac 的 safari、chrome、firefox、opera 上的最新 3 个版本）上运行正常，并且在 ie9 上运行，但 ie10 和 ie11 有一些重大错误（我的测试是发生在浏览器堆栈上）。

测试服务器上的问题站点：http://flourishcle.com/globalmba/

ie10//ie11 问题：

每个 #semester 中的 .content 消失了 - 我在滑入时看到它然后消失了
.content 内的 imgs 上的 min-width 有不需要的结果（即使应用了 height: auto）
Overflow: hidden 不被尊重（与倾斜的伪元素相关联） - 重叠的内容会阻止点击底层内容

我的第一个想法是我用来创建网站结构的display: table 存在问题，但这不应该影响视觉效果或创建压缩图像。

编辑 // 更新

因此，我已将问题范围缩小到 SkewX 和 ie10/ie11 的特定问题。

基本 HTML：

<section class="section-1 angled">
  <div class="wrapper">
    //Content
  </div>
</section>
//Structure repeated multiple times

基本 CSS（使用 Compass 导入供应商细节）：

.angled {
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.wrapper {
  -moz-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}

如果我禁用任何一种 skewX 样式，一切都会按预期工作（除了它看起来歪斜得很糟糕）。

但是，当两者都启用时，会出现文本问题：文本、div 等不再可见。如果您打开开发工具并选择 div，有时内容会显示出来。如果您选择文本应该出现的区域，有时它会显示出来。但通常内容只是不显示。我还没有将其视为已报告的错误。我知道有针对 ie > 9 的解决方法（因为不支持条件 cmets，但希望找到解决方案）。

*Skew 问题似乎不影响 ie9

【问题讨论】：

我很确定这是因为您缺少右括号。我尝试查看 screen.css，但格式非常糟糕，我无法轻易分辨。
@MiniRagnarok - 我认为它也可能是 CSS，但我浏览了 SASS 文件。它是压缩编译的 sass，这可能就是它看起来很乱的原因。
浏览器堆栈是否可能只是不显示内容？内容似乎在那里，但只是没有出现。即使我禁用了所有不透明度设置，它也不会显示在浏览器堆栈中。我还没能接触到支持 Windows 的设备。
"浏览器堆栈是否可能只是不显示内容？"不。我在 IE 11 中测试过。肯定不存在。
不寻常的是我可以让内容显示出来。假设您点击了第一学期。内容转换出现然后消失。如果我打开开发者控制台并将鼠标悬停在#semester-one 上，内容会重新出现。

标签： html css internet-explorer-10 internet-explorer-11

【解决方案1】：

不知道你是否还在寻找解决方案，但我找到了 ie10 和 ie11 的“修复”。

将子 div 样式替换为：

.wrapper {
  -moz-transform: skewX(20.01deg);
  -ms-transform: skewX(20.01deg);
  -webkit-transform: skewX(20.01deg);
  transform: skewX(20.01deg);
}

看起来 ie 在值相同时渲染双偏斜有问题。（还没有挖掘出来看看为什么）我尝试更改它们，并且具有两个不同的值似乎可以解决问题。

+ .01deg 允许您保持与之前的 20deg 倾斜几乎相同（如果不相同）的倾斜。

【讨论】：

【解决方案2】：

@jack answer 是正确的！

依靠IE不消耗相同值的倒角，您可以添加 -360 度到您的倾斜值并应用于内部元素。

.angled {
    -moz-transform: skewX(-380deg);
    -ms-transform: skewX(-380deg);
    -webkit-transform: skewX(-380deg);
    transform: skewX(-380deg);
}

.wrapper {
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
}

【讨论】：