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
优先级问题??
1 /* 这种写法在 IE11 上没有动画,transform 被覆盖 */
.animated{ 2 -webkit-animation: moveUp .8s 2.5s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96); 3 animation: moveUp .8s 2.5s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96); 4 -webkit-transform: translateZ(0); 5 transform: translateZ(0) 6 } 7 8 @keyframes moveUp{ 9 0%{transform: translateY(0);} 10 50%{transform: translateY(100%);} 11 100%{transform: translateY(-100%);opacity: 0;} 12 }
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.