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. IOS版本号被拒的经历

    IOS版本号被拒的经历: 1,登陆方式依赖外部平台 由于我们的APP是仅仅用微博登陆.想做成类似meerkat类型的.也能各种消息都同步微博. 结果当然行不通,这个确实是不听好人言.网上多个人都说过这 ...

  2. Perl怎样过滤html标签

    比方一串字符串 <div><b>123</b></div> 假设仅仅想拿到123怎么办呢? 用perl的正則表達式能够非常easy的做到. $str = ...

  3. 无法连接虚拟设备 ide1:0,因为主机上没有相应的设备。您要在每次开启此虚拟机时都尝试连接此虚拟设备吗?

    转自:http://blog.51cto.com/thawliu/1704876 安装虚拟机时出现提示:无法连接虚拟设备 ide1:0,因为主机上没有相应的设备.您要在每次开启此虚拟机时都尝试连接此虚 ...

  4. [JZOJ 5911] [NOIP2018模拟10.18] Travel 解题报告 (期望+树形DP)

    题目链接: http://172.16.0.132/senior/#contest/show/2530/1 题目: EZ同学家里非常富有,但又极其的谦虚,说话又好听,是个不可多得的人才.        ...

  5. Android Handling back press when using fragments in Android

    In MainActivity: getSupportFragmentManager().beginTransaction().replace(R.id.gif_contents, gifPageTw ...

  6. 51nod 1066 - Bash游戏,简单博弈

    有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出N和K,问最后谁能赢得比赛. 例如N = 3 ...

  7. mybatis批量插入、批量更新和批量删除

    转载 https://www.jianshu.com/p/041bec8ae6d3

  8. lftp简单使用

    连接服务器: lftp -e "参数;" "username":"password"@"ip" -p port lftp ...

  9. scrapy框架学习

    一.初窥Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了 页面抓取 (更确切来说, 网 ...

  10. javascript的var声明变量和不用var声明变量在全局作用域的区别;

    在全局作用域下,使用var定义的变量不可以delete,没有var 定义的变量可以delete.也就说明隐含全局变量严格来说不是真正的变量,而是全局对象的属性,因为属性可以通过delete删除,而变量 ...