Question

原始问题

我似乎无法解决这些问题（我已经完成了正常的错误检查流程 - 验证，控制台调试等等。）

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

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

ie10 // ie11问题：

每个.content中的#semester消失 - 我在幻灯片中看到它然后消失了
min-width .content中的imgs会产生不需要的结果（即使应用了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，有时会显示内容。如果您选择文本应该有时会显示的区域。但通常内容并没有显示出来。我还没有把这看作是一个报道的bug。我知道有针对性的解决方法，即＆gt; 9（因为条件评论不受支持，但希望找到解决方案）。

*歪斜问题似乎不会影响ie9

Answer 1

不知道你是否仍在寻找解决方案，但我找到了一个＆＃34;修复＆＃34;对于ie10和ie11。

将子div样式替换为：

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

看起来好像即在值相同时渲染双重倾斜的问题。（没有挖掘它，看看为什么，但）我尝试改变它们，并且有两个不同的值似乎可以解决问题。

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

Answer 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);
}

ie10，ie11问题与skewX（双重使用导致渲染问题）

2 个答案: