浏览器常见bug及解决办法

常见的bug列表：

  1. IE6下，当块级元素   margin与float同方向时，margin会加倍  例如 .box{float:left;margin-left:10px;}在IE6下表现的margin-left是20px,这时的解决办法设置display:inline;  要深入理解margin双边距bug产生的条件。
  2. img在所有浏览器下边有空白 通用解决办法  img{vertical-align:top;},当然也有其他解决办法 参照笔记  img标签下边空白解决方案
  3. img元素在ie浏览器下有默认边框  通用解决办法 img{border:0 none;}   综合2，3解决这两个bug可以在公用样式中这样定义 img{bordr:0 none;vertical-align:top; }
  4. 多个行内元素都设置成display:inline-block;时元素之间有空格 解决办法设置父元素的font-size:0;再重新声明父元素的子元素的字体大小
  5. 块级元素设置display:inline-block;在IE6/7下不能正确显示   *display: inline;*zoom: 1;  
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>inline-block</title>
        <link rel="stylesheet" type="text/css" href="../css/css.css"/>
        <style type="text/css">
            .span1,.span2,.div1,.div2{display: inline-block; width: 100px; height: 100px;}
            .span1,.div2{ background: blue; }
            .span2,.div1{background: red;}
            .div1,.div2{*display: inline;*zoom: 1;}
            /**display: inline;*zoom: 1;*/
        </style>
    </head>
    <body>
        <div class="box">
            <span class="span1">span1</span>
            <span class="span2">span2</span>
            <div class="div1">
                div1
            </div>
            <div class="div2">
                div2
            </div>
        </div>
        <div>
            块级元素的display:inline-block IE6/7 不支持，解决办法 *display:inline;*zoom:1;
        </div>
    </body>
</html>

 

  1. IE6不识别min-height(max-height)属性，解决办法 .box{min-height:100px;_height:100px;}, 此时一定不能再设置overflow的值为hidden，否则模拟min-height效果将失效
  2. IE6下，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现 我还没搞清楚==
  3. ul li a 列表时，设置a的display:block让a充满li的区域增大点击区域 IE6下li之间会有间距，解决办法为a设置height或者设置zoom:1;触发IE下的hasLayout

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            ul,ol{list-style: none;}
            li a{background: blue; display: block;height: 30px; }
        </style>
    </head>
    <ul>
        <li><a href="#">99</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">99</a></li>
    </ul>
    <body>
    </body>
</html>

 

 

 

  1. 游标手指cursor  cursor: pointer 可以同时在 IE FF 中显示游标手指状，cursor:hand; 仅 IE中有效,所以用css设置鼠标手形时都统一用cursor:pointer;
  2. 在制作一个表格时一般将table放入一个div中，这时table宽度不能充满父div,这时要设置table{width:100%;}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
        <link rel="stylesheet" type="text/css" href="../css/css.css"/>
        <style type="text/css">
            .tab_cont table{width: 100%;}
            .tab_cont th,.tab_cont td{border: 1px solid #ccc;padding: 5px 0;}
            .tab_cont tr{ text-align: center;}
            h1,p{text-align: center; font-weight: bold;color: red;}
            tr:hover{background: #666; color: #fff;}
            .gray{background: #F8F8F8;}
            thead tr{background: #999; color: #fff;}
        </style>
    </head>
    <body>
        <h1>表格的制作方法</h1>
        <div class="layout tab_cont">
            <table>
                <thead>
                    <tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
                </thead>
                <tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
            </table>
        </div>
        
        
        
        <div>
            <p>一定要设置table的width:100%让table充满父div,不设置不能充满</p>
            <p>单元格只对padding有效，对margin无效</p>
        </div>
    </body>
</html>

 

  1. 万能的zoom:1;当在IE6下遇到奇葩的问题不能解决时，试试zoom:1 它可以触发ie6的hasLayout而不影响其他浏览器的正常表现
 
CSS属性Hack写法
1、IE6浏览器
.demo {_color: red;}
2、IE6-7浏览器识别
.demo {*color: red;}
3、所有浏览器除IE6浏览外
.demo {color/**/:red;}
4、IE6-9浏览器
.demo {color: red9;}
5、IE7-8浏览器
.demo {color/***/:red9;}

posted on 2016-10-20 16:29  amazingsong  阅读(1372)  评论(0)  编辑  收藏  举报

导航