最近看了大神的一篇文章，于是尝试了一下里面说的bug以及修复

1.Chrome下absolute绝对定位元素部分display属性值不渲染bug

首先还原一下bug..

ff下的下效果

点击按钮后的效果

代码如下：

<style>

.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 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/

关于chrome下的bug的更多相关文章

  1. chrome下float元素下input选中内容bug

    今天在写一个小demo的时候,发现chrome下一个很奇怪的bug. 我的代码如下: <!DOCTYPE html> <html lang="en"> &l ...

  2. Chrome出了个小bug：论如何在Chrome下劫持原生只读对象

    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...

  3. IE下设置unselectable与onselectstart属性的bug，Firefox与Chrome下的解决方案

    在IE下给DIV设置unselectable与onselectstart属性,可以让div的内容不能选中,这个功能在很多情况下,非常有用,但是他的bug太明显, 直接使用一个DIV是可以的,比如: & ...

  4. Linux下Chrome浏览器的BUG

    “我胡汉三又回来了”,好久没出现在博客园了,准备考试什么的最烦躁了,今天又重新整了下我的Ubuntu,结果发现了一个Chrome浏览器的Bug,但是与其说它是个Bug,还不如说它是个Joke. 好吧, ...

  5. IE下的bug

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1 ...

  6. input 光标在 chrome下不兼容 解决方案

    input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type= ...

  7. ie下的bug之button

    场景描述: 现在页面设计是都喜欢自定义按钮样式,某日接收到页面发现在ie下有bug,上代码: <div> <button><span><a href=&quo ...

  8. 如何在Chrome下Debug Mocha的测试

    简介 经过前两篇文章的介绍,相信读者对Mocha应该有一定的认知了,本文重点讲述如何在Chrome下Debug Mocha Test, 方便你在测试fail的时候troubleshooting. 关键 ...

  9. 在chrome下的文本框sendkeys，提示element can't focus--解决方法

    在chrome下的文本框sendkeys,提示element can't focus--解决方法(成都-半步流雲,群友解决) 成都-半步流雲1.升级你的chromedriver,2.降chrome版本 ...

随机推荐

  1. （2）-生成JSONObject的方法

    生成JSONObject一般有两种方式,通过javabean或者map类型来生成.如下面的例子:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2 ...

  2. Android实现表单提交，webapi接收

    1.服务端采用的是.net的WEBAPI接口. 2.android多文件上传. 以下为核心代码: package com.example.my.androidupload; import androi ...

  3. Selenium窗口切换-----Selenium快速入门（六）

    有时候,我们打开多个窗口,进行多窗口操作,那么窗口间该如何切换呢? 切换的方法有两个,一个是通过窗口标题来验证,另一个是通过窗口特定的内容来验证,这两个方法都要求得到的标题或内容是唯一的. 用到的相关 ...

  4. 用jquery-table2excel，进行导出excel

    jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件.该插件可以根据你的需要导出表格中的内容,不需要的行可以不导出. 它文件体积小,使用非 ...

  5. C# 4种方法计算斐波那契数列 Fibonacci

    F1: 迭代法 最慢,复杂度最高 F2: 直接法 F3: 矩阵法 参考<算法之道(The Way of Algorithm)>第38页-魔鬼序列:斐波那契序列 F4: 通项公式法 由于公式 ...

  6. Skyline桌面二次开发之路径漫游（C#）

    所谓路径漫游:即创建一个动态对象和一条由多点组成的线,然后让动态对象沿着线飞行 首先绘制一条线,实际上路径漫游是不需要绘制线的,我这里只是为了确认动态对象是否沿着线路在飞行,代码如下: //绘制路径 ...

  7. 8-网络请求之http

    本篇博客对应视频讲解 回顾 上一篇讲了Linq的使用,大家自己上手实践之后,相信一定会感到非常快捷方便.更多详细的内容还是需要自己去阅读官方文档. 今天要讲网络请求中的http请求,这也是在编程当中经 ...

  8. sharepoint 2016 download

     链接: http://pan.baidu.com/s/1pLBwvnt 密码: c928 SharePoint 2016 Server中文版,

  9. Windows系统设置临时环境变量

    path f:\newtest;%path% ---在Path内容中增加一个新的可执行文件搜索路径 从菜鸟到高手,CMD命令行修改临时环境变量:path

  10. COGS1752. [BOI2007]摩基亚Mokia（CDQ，树状数组）

    题目描述 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它能够回 ...