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:;}
}

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.

IE9+ BUG汇总的更多相关文章

  1. ie7,8常见bug,共计257个bug汇总?如何解决ie的历史bug

    ie7.8常见bug,共计257个bug汇总 针对web开发者来说,浏览器的bug,特备是ie的bug是很多人的噩梦,因为ie的更新换代没有ff,chrome,safari,opera那么快,而且ie ...

  2. IE兼容BUG汇总及解决方案(持续更新)

    本篇为总结开发过程当中遇到的各种IE兼容性的小问题,比较复杂的会单开一篇文章来讲解. 另:我手头目前只有原生IE8,原生IE9,原生IE11,以及IE11模拟的IE5,7,8,9,10.因IE6太过古 ...

  3. IE9 BUG overflow :auto 底部空白解决方案

    今天去升级了到IE9,运行项目的时候发现,我的div显示滚动条时候,用js动态加载进去的内容在光标移动的时候,底部自动被撑大留着空白, IE8 Chrome这些以前都试过 没发现这个问题 研究了好久 ...

  4. JDK小Bug汇总

    Java官方的Logger.getGlobal().info无效 无效代码 Logger.getGlobal().info("start"); 解决方案(三选一): Logger. ...

  5. IE6 BUG 汇总

    1.IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方 ...

  6. bug汇总 (EF,Mvc,Wcf)

    此博客用于在开发过程总bug及其解决方案的记录. 1. 异常信息:  ObjectStateManager 中已存在具有同一键的对象.ObjectStateManager 无法跟踪具有相同键的多个对象 ...

  7. ie6,ie7,ie8 css bug汇总以及兼容解决方法

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  8. IE兼容性bug汇总

    1.IE6的双边距BUG. 发生条件:如果有元素是浮动元素,则该元素与它的父元素(一般是一个容器)直接相接触(中间不能隔着其他元素)的左或右的边距就会产生双倍边距,也意味着相邻的兄弟元素不可能会产生双 ...

  9. Django开发BUG汇总

    使用版本知悉 limengjiedeMacBook-Pro:~ limengjie$ python --version Python :: Anaconda, Inc. limengjiedeMacB ...

随机推荐

  1. 使用Love2D引擎开发贪吃蛇游戏

    今天来介绍博主近期捣腾的一个小游戏[贪吃蛇],贪吃蛇这个游戏相信大家都不会感到陌生吧.今天博主将通过Love2D这款游戏引擎来为大家实现一个简单的贪吃蛇游戏,在本篇文章其中我们将会涉及到贪吃蛇的基本算 ...

  2. 公司--下载svg图片

    加载本地svg图片: SVGParserRenderer norDrawable = OtherPageConfigsManager.getInstance().getSVGParserRendere ...

  3. 用ksh运行一个helloworld

    本文目的在于记录和回顾.不建议当教程. Linux上没有ksh的话yum install ksh就可以了 直接上图 vim一个文件后缀名是ksh 内容是和shell差不多 然后赋予这个文件可执行权限 ...

  4. 【实战经验】64位Win7安装+32位Oracle + PL/SQL 解决方法

    软件环境:64位win7.32位Oracle 10g. PL/SQL 9.0.4.1644 前言:以前开发用的都是32位系统,突然换到64位上,安装环境真的有点麻烦了,尤其对于PL/SQL只支持32位 ...

  5. JS异步操作之promise发送短信验证码.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta cont ...

  6. div内快元素[div,p。。。]居中办法

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  7. vue实现tab栏切换

    html <ul class="tab"> <li v-for="(item,index) in tabs" @click="tab ...

  8. 使用java向邮箱发送邮件

    这是我很早之前写的一个工具类,最近在整理自己所学的东西,无意中找到了,就拿出来与大家分享,代码如下: import java.io.ByteArrayOutputStream; import java ...

  9. shell 文件中添加内容

    下文所有 1111  ,  2222 均为字符串 sed -i '/1111/i\2222' a.txt   在a.txt中找到所有符合1111得 前面加上2222 sed -i '/1111/a\2 ...

  10. php7 memcache和memcached.so扩展

    php7安装memcache和memcached扩展 https://github.com/websupport-sk/pecl-memcache https://github.com/php-mem ...