ie10,ie11问题与skewX(双重使用导致渲染问题)

Question

原始问题

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

不知何故,该网站在最新的浏览器上正常工作(在Windows和mac的safari,chrome,firefox,opera上最新的3个版本)并且它适用于ie9,但ie10和ie11有一些主要的错误(我的测试发生在browserstack上).

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

ie10 // ie11问题:

• 该.content范围内的每个#semester消失-我看到它在幻灯片中,然后消失
• min-width在imgs内.content有不想要的结果(即使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.我知道有针对性的解决方法,即> 9(因为不支持条件注释,但希望找到解决方案).

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

Answer 1

不知道你是否仍在寻找解决方案,但我找到了ie10和ie11的"修复".

将子div样式替换为:

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

看起来像是有问题,当值相同时渲染双重倾斜.(没有挖掘它,看看为什么,但是)我尝试改变它们,并且有两个不同的值似乎可以解决问题.

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