IE9+ BUG汇总

CSS透明没有继承 css opacity is not inherited in internet explorer

今儿遇到一个问题源于同事写的一个页面，发现父级明明 opacity:0 了，但子级还显示，原来是 IE9+ 的一个 BUG；影响版本： IE9/IE10/IE11

解决方案，请参考：http://makandracards.com/makandra/21779-css-opacity-is-not-inherited-in-internet-explorer

Elements will not inherit their parent’s opacity in IE for no good reason. This can lead to unexpected behaviour when you want to fade/hide an element and all its children.

To fix it, give the element defining the opacity a non-static positioning. For example:

 

.foo {
  opacity: 0.2;
  position: relative; // for IE
}

While the linked article describes this problem for IE9 and below, I have encountered the same issue in IE10 and IE11.

Just go away, Internet Explorer!

IE11 Fixed Background image scrolling issue

BUG 描述：如果背景设置在子元素上，滚动屏幕就会晃动，如果设置在 body 上，不会；（background-attachment:fixed internet explorer 11 odd up & down jiggle [duplicate]）

https://connect.microsoft.com/IE/feedback/details/819518/fixed-background-image-scrolling-issue

http://social.msdn.microsoft.com/Forums/windows/en-US/9567fc32-016e-48e9-86e2-5fe51fd67402/new-bug-in-ie11-scrolling-positionfixed-backgroundimage-elements-jitters-badly

http://stackoverflow.com/questions/23724419/background-attachmentfixed-internet-explorer-11-odd-up-down-jiggle

demo:http://the1900.tistory.com/

解决办法有二：

1. 关闭 IE 的平滑滚动设置 via；

2.添加以下修复代码 via

if(navigator.userAgent.match(/Trident/7./)) {
        $('body').on("mousewheel", function () {
            console.log('hey');
            event.preventDefault();

            var wheelDelta = event.wheelDelta;

            var currentScrollPosition = window.pageYOffset;
            window.scrollTo(0, currentScrollPosition - wheelDelta);
        });
}
// 亲测有效

3. 更多讨论 via

优先级问题？？

/* 这种写法在 IE11 上没有动画，transform 被覆盖 */
　　.animated{
 -webkit-animation: moveUp .8s 2.5s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96);
   animation: moveUp .8s 2.5s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96);
 -webkit-transform: translateZ(0);
   transform: translateZ(0)
}

@keyframes moveUp{
 0%{transform: translateY(0);}
 50%{transform: translateY(100%);}
 100%{transform: translateY(-100%);opacity: 0;}
}

var a = [];"[object Array]"===toString.apply(a);//调用的对象无效(IE11)

var a = [];"[object Array]"===toString.apply(a);//true(Chrome/Firefox)

var a = [];"[object Array]"===Object.prototype.toString.apply(a);//all true

IE上 input[type=text] 如果只设置 line-height:50px; 容器不会有 50px 高，需要添加 height:50px，而 Chrome 下会是 50px

IE11 getBoundingClientRect Unspecified error.