最近看了大神的一篇文章，于是尝试了一下里面说的bug以及修复
1.Chrome下absolute绝对定位元素部分display属性值不渲染bug
首先还原一下bug..
ff下的下效果
点击按钮后的效果
代码如下：
<style>
.img{
200px;
position:absolute;
-webkit-transform: translateZ(0);
}
.btn{
200px;
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button;
background:blue;
display: block;
}
</style>
<body> <div id='demo'> <button class='btn' id='btn'>图片display:inline-block</button> <strong>点击上面按钮，改变图片display水平：</strong><img src="./img/1.jpg" id='img' class='img' alt=""> </div> </body> <script> //兼容绑定事件 function bindEvent(elem,type,fn){ window.addEventListener?elem.addEventListener(type,fn,false):elem.attachEvent('on'+type,fn); } var btn = $('btn'),img = $('img'),demo = $('demo'); bindEvent(btn,'click',function(){ if(img.style.display == 'block'){ img.style.display = 'inline-block'; btn.innerHTML = '图片display:inline-block'; }else{ img.style.display = 'block'; btn.innerHTML = '图片display:block'; } }); </script>
现在看看chrome下的效果
可以看出img没有随着display的改变而换行，
要注意的是，只有当图片元素设置了position，并且没有设top和left的情况下才会出现这种bug
bug的修复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .translateZ{ -webkit-transform: translateZ(0); } .img{ width:200px; position:absolute; -webkit-transform: translateZ(0); } .btn{ width:200px; appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; background:blue; display: block; } </style> <body> <div id='demo'> <button class='btn' id='btn'>图片display:inline-block</button> <strong>点击上面按钮，改变图片display水平：</strong><img src="./img/1.jpg" id='img' class='img' alt=""> </div> </body> <script> //获取元素 function $(id){ return document.getElementById(id); } //判断类 function hasClass(obj, cls) { return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)')); } //增加类 function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } //删减类 function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\s|^)' + cls + '(\s|$)'); obj.className = obj.className.replace(reg, ' '); } } //兼容绑定事件 function bindEvent(elem,type,fn){ window.addEventListener?elem.addEventListener(type,fn,false):elem.attachEvent('on'+type,fn); } var btn = $('btn'),img = $('img'),demo = $('demo'); bindEvent(btn,'click',function(){ if(img.style.display == 'block'){ img.style.display = 'inline-block'; removeClass(demo,'translateZ'); btn.innerHTML = '图片display:inline-block'; }else{ img.style.display = 'block'; //addClass(demo,'translateZ'); btn.innerHTML = '图片display:block'; } }); </script> </html>
修复的方法，利用的是 -webkit-transform: translateZ(0);
改变display为block的时候，同时添加 -webkit-transform: translateZ(0);
改变display为inline-block的时候，同时删除 -webkit-transform: translateZ(0);
2.Chrome下absolute绝对定位元素具有overflow属性的块状子元素visibility hover不渲染bug
Chrome浏览器下，绝对定位元素，同时visibility:hidden时候，如果子元素具有块状水平，
同时设置了overflow:hidden; 则父元素hover时候，无法让子元素visibility:visible渲染生效！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .outer{ position:absolute; visibility: hidden; } .bug{ overflow: hidden;/* 重要条件 */ } .demo:hover .bug { visibility: visible; /* Chrome浏览器下，此声明无效 */ } </style> <body> <div class='demo'> Chrome罕见visibility渲染bug(<em>hover me</em>) <div class='outer'> <div class='bug' id='bug'><img src="img/1.jpg"></div> </div> </div> </body> </html>
ff下的效果
chrome下的效果
其实造成这效果的原因和position有很大关系，如果把position去掉visibility的效果有可以呈现了
但是如果项目需要用到position：absolute，那么可以用下面的方法
.hover:hover .bug {
visibility: visible;
-webkit-transform: translateZ(0); /* 解决方法*/
}
添加后，问题就解决了
本文参考自http://www.zhangxinxu.com/wordpress/2015/01/chrome-absolute-display-visibility-render-bug/