您还未登录! 登录 | 注册 | 帮助  

您的位置: 首页 > 软件测试管理 > 缺陷管理 > 正文

浏览器常见Bug及解决办法

发表于:2017-02-07 作者:amazingsong 来源:

  常见的bug列表:
  IE6下,当块级元素   margin与float同方向时,margin会加倍  例如 .box{float:left;margin-left:10px;}在IE6下表现的margin-left是20px,这时的解决办法设置display:inline;  要深入理解margin双边距bug产生的条件。
  img在所有浏览器下边有空白 通用解决办法  img{vertical-align:top;},当然也有其他解决办法 参照笔记  img标签下边空白解决方案
  img元素在ie浏览器下有默认边框  通用解决办法 img{border:0 none;}   综合2,3解决这两个bug可以在公用样式中这样定义 img{bordr:0 none;vertical-align:top; }
  多个行内元素都设置成display:inline-block;时元素之间有空格 解决办法设置父元素的font-size:0;再重新声明父元素的子元素的字体大小
  块级元素设置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>
  IE6不识别min-height(max-height)属性,解决办法 .box{min-height:100px;_height:100px;}, 此时一定不能再设置overflow的值为hidden,否则模拟min-height效果将失效
  IE6下,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现 我还没搞清楚==
  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>
  游标手指cursor  cursor: pointer 可以同时在 IE FF 中显示游标手指状,cursor:hand; 仅 IE中有效,所以用css设置鼠标手形时都统一用cursor:pointer;
  在制作一个表格时一般将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>
  万能的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;}